css动画

写到css样式里
transition: all 1s ease-in-out 2s;
变化曲线的值

ease:默认值,先快再快再慢
ease-in:淡入(动画刚开始的时候变化慢)
ease-out:淡出(动画快结束的时候变化慢)
ease-in-out:淡入淡出(开始慢,中间块,结束慢)
linear:线性(匀速变化)
过渡动画当失去触发时机,会恢复到原来的状态

触发过渡动画的时机:

• 1,hover(最常用)

关键帧动画
动画效果

animation:name 5s ;
由@keyframes决定
1,@keyframes必须写在css样式里面
2,@keyframes中的动画名要和animation-name的名字一样
@keyframes 动画名{
from{修改的属性值}
to{修改的属性值}
}

demo

    
    
    


    

        
LODING