animation动画的使用

animation动画的使用

animation：mymove 5s infinite
-webkit-animation:mymove 5s infinite; /Safari and Chrome/
@keyframes mymove{
from {left:0px;}
to {left:200px;}
}

总结：动画
&:hover {
transform: scale(0.5); // 这个是缩放
opacity: 0.2; // 这个是透明度
animation: mymove 1s; // 这个是动画效果
}
// 一下是动画的效果
@keyframes mymove {
from {-webkit-transform: scaleX(1);transform: scaleX(1);
}
25% {-webkit-transform: scale3d(1.25,0.75,1);transform: scale3d(1.25,0.75,1);
}
50% {-webkit-transform: scale3d(1.15,0.85,1);transform: scale3d(1.15,0.85,1);
}
75% {-webkit-transform: scale3d(1.05,0.95,1);transform: scale3d(1.05,0.95,1);
}
to {-webkit-transform: scaleX(1);transform: scaleX(1);
}
}
@-webkit-keyframes mymove {
from {-webkit-transform: scaleX(1);transform: scaleX(1);
}
 25% {-webkit-transform: scale3d(1.25,0.75,1);transform: scale3d(1.25,0.75,1);
  }
  50% {-webkit-transform: scale3d(1.15,0.85,1);transform: scale3d(1.15,0.85,1);
  }
  75% {-webkit-transform: scale3d(1.05,0.95,1);transform: scale3d(1.05,0.95,1);
  }
  to {-webkit-transform: scaleX(1);transform: scaleX(1);
  }
}