css3中的transition与animation的学习

transition 过渡动画 只能从A状态到B状态

• transition-property:需要过度的属性；默认是所有，监听所有具备过度动画的属性
• transition-duration:过渡动画时间，表示这个过渡动画多少秒来完成
• transition-timing-function:过度动画运动状态，如先慢后快，或先快后慢，或者匀速 或者使用贝塞尔曲线cubic-bezier
• transition-delay:等待多少秒后执行动画

transition: transition-property transition-duration transition-timing-function transition-delay;

transition:width 2s linear 0;

div{
    width: 200px;
    height: 200px;
    background: red;
    transition: all 1s cubic-bezier(0,0,1,1);
}
div:hover{
    width: 400px;
    height: 400px;
}

animation 可以从A状态到B状态到C状态，animation可以进行多段动画

• animation-name:设置动画的名字 如：填入@keyframes后面的名字

• animation-duration:设置动画时间

• animation-timing-function 过度动画运动状态，如先慢后快，或先快后慢，或者匀速 或者使用贝塞尔曲线cubic-bezier 这个动画状态不是从A到C过程中的状态，表示的是你在@keyframes中设置了多少段就会有几个这个状态，比如在@keyframes中有 from 50% 75% to 三段，那他就会有三段相同的状态，from到50%一段，50%-75%一段，75%-to一段。所以是css3的动画不可控

• animation-delay： 等待多少秒后执行动画

• animation-iteration-count：动画循环次数

• animation-direction：动画的方向

• animation-play-state：设置动画的暂停与开始

• animation-fill-mode：默认是不保存设置运动状态

  • forwards：保留最后一次动画是的状态：比如给div添加运动状态，默认是黑色，开始动画是红色，结束动画是蓝色， 设置animation-fill-mode：forwards，动画运行完后的颜色就不是默认的黑色而是蓝色； 但是页面一开始加载之前的颜色还是默认颜色黑色，到了动画才会是动画的颜色
  • backwards：保留第一次动画时的状态：比如给div添加运动状态，默认是黑色，开始动画是红色，结束动画是蓝色， 设置animation-fill-mode：backwards，动画运行完后的颜色就不是默认的黑色而是最开始动画的颜色红色； 加载动画之前都已经是红色了，然后运动完后就有变成最初始的黑色了 注：这里的状态是包括你在@keyframes里面设置的所有值如width,height等等；
  • both:表示在动画开始之前就是第一帧的状态，动画结束之后就是动画最后一帧的状态

div{
  position: relative;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s linear 1s infinite normal both ;
}
@keyframes move {
  from{
    left: 0;
    top: 0;
  }
  25%{
    left: 100px;
    top: 0;
  }
  50%{
    left: 100px;
    top: 100px;
  }
  75%{
    left: 0;
    top: 100px;
  }
  to{
    left: 0;
    top: 0;
  }
}
div:hover{animation-play-state:paused}