CSS动画学习

今天项目用到css动画，刚好以这个契机学习总结一下。关于动画效果，我发现有两种实现方式–transition 和 animation两种。

---

1.transition形式–渐变

div {
  width: 100px;
  transition: ease-in-out 0.4s ;//设置过渡样式：渐变方式，时间
  transition-property：width;//none|all|property 过渡对象属性
  transition-duration：4s;//过渡时间
  transition-timing-function:ease-in-out;//方式
  transition-delay:1s;//延迟时间
  -webkit-transition: ease-in-out 0.4s;//兼容性扩展
  -o-transition: ease-in-out 0.4s;
  -ms-transition: ease-in-out 0.4s;
}
div:hover {
  width: 200px;
}

2.animation形式动画

div {
  animation:myAnimation 2s ease-in-out 3s infinite alternate paused both;
  //动画名 周期时长 方式 delay 循环 反向动画 动画状态 向前/后兼容
  //-ms-animation -o-animation -webkit-animation -moz-animation
  //animation-delay animation-duration animation-timing-function
  //animation-iteration-count animation-play-state
  //animation-direction animation-fill-mode
}
@keyframes myAnimation {
  from {transform:rotate(8deg) translate(20px,10%);}
  to {transform:rotate(0deg);}
}

3.transform 2/3D转换
1)rotate 2)scale 3)skew 4)translate 5)martrix