/* 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%);}
  100% {clip-path: polygon(90% 30%, 40% 80%, 40% 80%);background-color: green;}
  
  
}

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

/* Standard syntax */
@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;}
}

/* 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;}
}
/* 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;}
}


/* 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); }
}