css transition属性和animation动画及区别

1. transtion的四个属性

transtion-property: 规定设置过渡属性的css属性
transtion-duration：延迟时间，指定从一个属性到另一个属性过渡所要花费的时间
transiton-timing-function：过渡函数
transition-delay：延迟时间

可设置的property属性有

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: max-height min-height max-width min-width height width
     border-width margin padding outline-width outline-offset
     font-size line-height text-indent vertical-align  
     border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

当property为all时即为所有的css属性都添加动画

可使用过渡动动画类型有：liner（匀速）、ease-in(减速)、ease-out（加速）ease-in-out（先加速再减速）、cubic-bezier：三次贝塞尔曲线，可以定制

 .small {
          width: 100px;
          height: 100px;
          background-color: #00FF00;
      }
      .small:hover {
          width: 200px;
          background-color: #d62599;
　　　　　　transition: width 500ms linear 500ms; } 

<div class="small"></div>



 animation

 <div id="round"></div>
 <div id="angle"></div>

@keyframes rote {
          0% {
              transform: rotate(0deg);
          }
          33% {
              transform: rotate(120deg);
          }
          66% {
              transform: rotate(240deg);
          }
          100% {
              transform: rotate(360deg);
          }
      }
      @keyframes scale {
          0% {
              transform: scale(0);
              opacity: 1;
          }
          20% {
              transform: scale(0.3);
              opacity: 0.75;
          }
          40% {
              transform: scale(0.6);
              opacity: 0.5;
          }
          60% {
              transform: scale(0.9);
              opacity: 0.25;
          }
          80% {
              transform: scale(1);
              opacity: 0;
          }
          100% {
              transform: scale(0);
              opacity: 0;
          }
      }
      #round {
          width: 40px;
          height: 40px;
          background-color: #6dbfff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          animation: scale 1s 0s infinite;
      }
      #angle {
          width: 40px;
          height: 40px;
          background-color: #6dbfff;
          position: absolute;
          top: 50%;
          left: 40%;
          transform: translate(-40%, -50%);
          animation: rote 1s 0s infinite;
      }

 

transtion:

transition所有的运行都需要条件进行触发。比如:hover、:focus、:checked或者js操作css样式的变更等等。

• transition需要事件触发，所以没法在网页加载时自动发生。
• transition是一次性的，不能重复发生，除非一再触发。
• transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
• 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

 animation:

不需要事件触发，也可以自动执行