动画（过渡动画、关键帧动画）

过渡动画

写到css样式里

transition :  all   1 s      ease-in-out   2 s ;

变化曲线的值

ease:默认值,先快再快再慢

ease-in:淡入(动画刚开始的时候变化慢)

ease-out:淡出(动画快结束的时候变化慢)

ease-in-out:淡入淡出(开始慢,中间块,结束慢)

linear:线性(匀速变化)

过渡动画当失去触发时机,会恢复到原来的状态

   触发过渡动画的时机:

* 1,hover(最常用)

* 2,focus当输入框获得焦点时

* 3,checked(选框被选中时)

* 4,媒介查询

* 5,js

关键帧动画

  动画效果

   animation:name 5s ;

  由@keyframes决定

     1,@keyframes必须写在css样式里面

     2,@keyframes中的动画名要和animation-name的名字一样

 @keyframes 动画名{

from{修改的属性值}

百分比{修改的属性}

to{修改的属性值}

}