CSS3-简单动画属性

transition

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

transition 简写属性,用于在一个属性中设置四个过渡属性
property 规定用于过渡的CSS属性的名称例如改变的是宽度就写width
duration 定义过渡效果花费的时间默认是0
timing-funcation 规定过渡效果的时间曲线,例如:ease, ease_in,ease_out.类似这种淡入淡出的效果,默认是ease.
delay 规定过渡效果何时开始默认是0

简单的过渡变大动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JOE</title>
        
        <style type="text/css">
            
            #test{
                background: red;
                width:  80px;
                height: 80px;
                transition: all 5s ease-in-out 0s;
                margin-left: 10px;
            }
            
            #test:hover{
                margin-left: 89%;
                transform: scale(1.5);
            }
            
            
        </style>
        
    </head>
    <body>
        
        <div id='test'></div>
        
    </body>
</html>

animation

在CSS3中,除了使用transitions功能实现动画之外,还可已使用animation实现复杂的动画效果,创建animation动画,首先要了解@keyframs规则.

@keyframes规则是创建动画,@keyframs规则内指定给一个CSS样式和动画将逐步从目前的样式更新为新的样式.

通常使用百分比来规定变化发生的时间,或者使用关键词from和to,等同于从0%和100%, 0%是动画的开始,100%是动画的结束.

animation的语法,除了上面列出的transition动画的四个属性之外,还增加了如下属性:

animation-iteration-count 动画播放的次数
animation-drection 规定动画是否在下个周期逆向播放,默认是normal
animation-play-state 规定动画是否正在运行或者暂停,默认是running

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JOE</title>
        
        <style type="text/css">
            
            #test{
                background: red;
                width:  80px;
                height: 80px;
                animation: myAnimation 5s;
                position: absolute;
                top: 20px;
                left: 20px;
                
                
            }
            
            @keyframes myAnimation{
                0%{
                    top: 20px;
                    left: 20px;
                    background: red;
                }
                25%{
                    top: 20px;
                    left: 200px;
                    background: yellow;
                }
                50%{
                    top: 200px;
                    left: 200px;
                    background: pink;
                }
                75%{
                    top: 200px;
                    left: 20px;
                    background: purple;
                }
                100%{
                    top: 20px;
                    left: 20px;
                    background: red;
                }
            }
            
            
        </style>
        
    </head>
    <body>
        
        <div id='test'></div>
        
    </body>
</html>

CSS3-简单动画属性

transition

animation

推荐阅读更多精彩内容