/* Chrome, Safari, Opera */
@-webkit-keyframes clipPath {
  10% {clip-path: polygon(0% 20%, 90% 80%, 10% 80%);background-color: orange;}
  50% {clip-path: polygon(50% 20%, 20% 80%, 10% 20%); transform: rotate(240deg);}
  100% {clip-path: polygon(90% 30%, 40% 80%, 40% 80%);background-color: green;opacity: 0.2;top: 300px;}
}

@-webkit-keyframes clipPath2 {
  10% {clip-path: polygon(10% 20%, 20% 30%, 30% 40%);background-color: purple;opacity: 0.1;}
  50% {top: 800px;clip-path: polygon(50% 100%, 20% 80%, 100% 20%);background-color: darkblue;}
  100% {clip-path: polygon(10% 20%, 40% 80%, 80% 10%);background-color: yellow;}
}

@-webkit-keyframes clipPath4 {
  10% {clip-path: polygon(10% 10%, 3% 70%, 90% 10%);
  background-color: orange;
  left: 10px; transform: rotate(40deg);}
  
  50% {clip-path: polygon(2% 0%, 60% 30%, 40% 50%);left: 70%;transform: rotate(45deg);opacity: 0.1;}
  
  100% {clip-path: polygon(3% 5%, 10% 30%, 70% 6%);background-color: green; transform: rotate(160deg);top: -100px;}
}


@-webkit-keyframes clipPath3 {
  10% {clip-path: polygon(10% 20%, 20% 30%, 30% 40%);background-color: purple;}
  50% {clip-path: polygon(50% 100%, 20% 80%, 100% 20%);background-color: cyan;}
  75%{clip-path: polygon(90% 10%, 80% 20%, 70% 30%);}
  100% {clip-path: polygon(10% 20%, 40% 80%, 80% 10%);background-color: yellow;opacity: 0.1;}
}

@-webkit-keyframes mymove {
  50% {opacity: 0;}
  100% {transform: scale(2) translateX(2000px);}
}

/* Standard syntax */
@keyframes square {
  0% {opacity: 1;top:0px;left:0px;transform: rotate(90deg);}
  25% {top:0px;left:calc(100vw - 100px);transform: rotate(180deg);}
  38%{top:calc(100vh - 100px);left:calc(100vw - 100px);transform: rotate(10deg);}
  50%{top:calc(100vh - 100px);left:calc(100vw - 100px);}
  75%{top:calc(100vh - 100px);left: 0px;transform:}
  100% {top: 0px;left: 0px;transform: rotate(0deg);}
}

@keyframes fade {
  80% {opacity: 1;}
  10%{opacity: 0;}
  50% {background-color: #0C4570;}
}

/* Standard syntax */
@keyframes fade2 {
  80% {opacity: 1;}
  10%{opacity: 0;}
  50% {opacity: 1;}
}

/* Standard syntax */
@keyframes m_rotate {
  80% {transform: rotate(30deg);}
  10%{transform: rotate(130deg);}
  50% {background-color: transparent;}
}
@keyframes 1_rotate {
  80% {transform: rotate(30deg);}
  10%{transform: rotate(130deg);}
  50% {background-color: transparent;}
  20%{top:2px;}
 }

/* Standard syntax */
@keyframes z_rotate {
  80% {transform: rotate(30deg);}
  10%{transform: rotate(130deg);}
}

/* Standard syntax */
@keyframes m_scale {
  80% {transform: scale(2);}
  10%{transform: scale(3);}
  50% {background-color: red;}
}

@keyframes scale_2 {
  10% {transform: scale(2);}
  50%{transform: scale(4);}
  80% {transform: scale(1);}
}

/* Standard syntax */
@keyframes m_width {
  80% {width: 100px;}
  10%{width: 500px;}
  50% {background-color: yellow;}
}

@keyframes z_width {
  80% {width: 100px;}
  10%{width: 500px;}
  50% {background-color: transparent;}
}

/* Standard syntax */
@keyframes t_scale {
  10%{transform: scale(3);}
  100% {transform: scale(2);}
}

/* Standard syntax */
@keyframes scale1 {
  10%{transform: scale(1);}
  100% {transform: scale(230);opacity: 0;}
}


/* Standard syntax */
@keyframes m_down {
  10%{top: 100px;}
  100% {top: 500px;}
}

/* Standard syntax */
@keyframes m_left_right {
  10%{left: 100px;}
  50% {left: 200px;}
  100% {left: 500px;}
}

/* Standard syntax */
@keyframes m_blur {
  100%{filter: blur(0px);}
  10% {filter: blur(50px);}
}

/* Standard syntax */
@keyframes test {
  10% 40% {top: 200px;}
  20% {top: -200px;}
  30% {top: 500px;}
  40% {top: -500px;top: 200px;}
  50% {left: 200px;}
  60% {left: 50px;}
  70% {left: 1500px;}
  80% {left: -500px;}
  90% {left: 100px;}
  10% {top: 10px;}
  20% {left: 200px;}
  30% {left: 500px;}
  40% {left: 100px;top: 200px;}
  50% {top: 200px;}
  60% {left: 50px;}
  70% {left: 1500px;}
  80% {left: -500px;}
  90% {left: 100px;}
  100% {left: 50px; top: 100px;}
}

/* Standard syntax */
@keyframes test1 {
  10% 40% {top: 200px;}
  20% {top: -200px;}
  30% {top: 500px;}
  40% {top: -500px;top: 200px;}
  50% {left: 200px;}
  60% {left: 50px;}
  70% {top: 1500px;}
  80% {left: -500px;}
  90% {left: 100px;}
  10% {top: 10px;}
  20% {left: 200px;}
  30% {left: 500px;}
  40% {left: 100px;top: 200px;}
  50% {top: 200px;}
  60% {left: 50px;}
  70% {left: 1500px;}
  80% {left: -500px;}
  90% {left: 100px;}
  100% {left: 50px; top: 100px;}
}

@keyframes moveLeftRight{
	10% {transform: translate(-1000px, 0px);}
	100%{background-image:url('');transform: translate(calc(100vw + 1000px), 0px);}
}
/* Standard syntax */
@keyframes test2 {
  10%{left: -200px;top:10px;}
  20% {left: 200px;}
  30% {left: 500px;}
  40%{left: 100px;}
  50% {left: 200px;top: -1000px;}
  60% {left: 50px;}
  70% {left: 1500px;}
  80% {top: -500px;}
  90% {left: 100px;}
  100% {left: 500px;top:100px;}
}

@keyframes corners {
  10%{left: calc(0vw);top:0px;}
  20% {left: calc(100vw);}
  30% {left: calc(100vw);top:calc(100vh);}
  40%{left: 0px;top:calc(100vh);}
  50% {left: 0px;top: 0px;}
  60% {left: 50px;}
  70% {left: 1500px;}
  80% {top: -500px;}
  90% {left: 100px;}
  100% {left: 500px;top:100px;}
}

/* Standard syntax */
@keyframes track1 {
  10% {left: calc(100vw - 10px);}
	
	50%{top:20px;opacity: 1;}
	60%{top:120px;}
	
  100% {left: 50px;opactiy:1;}
}

/* Standard syntax */
@keyframes track2 {
  10% {left: calc(100vw - 10px);top:20px;}
  25%{left:20px;}
	50%{top:calc(100vh - 10px);transform: rotate(130deg);}
  100% {left: 50px;}
}

@keyframes circle {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}