CSS3中的动画

动画

动画(animation) 是css中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个,    或一组动画
常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

1. 动画的基本使用

制作动画分为两步:

  1. 先定义动画
  2. 再使用(调用)动画
用keyfames定义动画(类似定义类选择器)
            @keyframes 动画名称{
                0%{
                    width:100px;
                }
                100%{
                    width:200px;
                }
            }

动画基本使用命令:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    Document
    


    

网页显示图:

CSS3中的动画_第1张图片

动画序列
1. 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。
2. 在@keyframes中规定某项CSS样式,就能创建由当前未央市住建改为新样式的动画效果。
3. 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
4. 请用百分比来规定变化发生的时间,或用关键词“from”和“to”,等同于0%和100%。

动画序列命令:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    Document
    


    

网页显示图:

CSS3中的动画_第2张图片

动画序列案例命令:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    Document
    


    

网页显示图:

CSS3中的动画_第3张图片

2. 元素使用动画
 div{
                width:200px;
                height:200px;
                background-color:aqua;
                margin:100px auto;
                /*调用动画*/
                animation-name:动画名称;
                /*持续时间*/
                animation-duration:持续时间;
            }

2. 动画常用属性

Document
属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。(必须的)
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的)
animation-timing-function 规定动画的速度曲线,默认是“ease”
animation-delay 规定动画何时开始,默认是0.
animation-iteration-count 规定动画被播放的次数,默认是1, 还有infinite
animation-direction 规定动画是否在下一周期逆向播放,默认是“normal”,alternate逆播放
animation-play-state 规定多那个计划是否正在运行或暂停。 默认是“running”,还有“pause”
animation-fill-mode 规定动画结束后状态,保持forwards回到起始backwards

动画属性命令:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    Document
    


    

网页显示图:

CSS3中的动画_第4张图片

3. 动画简写属性

animation : 动画名称 持续时间  运动开始  播放次数  是否反方向  动画起始或者结束的状态;
animation: myfirst 5s linear   2s   infinite   alternate;


简写属性里面不包含 animation-play-state
暂停动画 : animation-play-state: puased; 经过和鼠标经过等其他配合使用
想要动画走回来, 而不是直接跳回来: animation-direction  :  alternate
盒子动画结束后,停在结束位置 : animation-fill-mode : forwards 

动画简写属性:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    Document
    


    

网页显示图:

CSS3中的动画_第5张图片

做一个地图热点图:

命令演示:




    
    
    
    Document
    


    
"map">
"city">
"dotted">
"pulse1">
"pulse2">
"pulse3">
"city tb">
"dotted">
"pulse1">
"pulse2">
"pulse3">
"city gz">
"dotted">
"pulse1">
"pulse2">
"pulse3">

网页显示图:

CSS3中的动画_第6张图片

4. 速度曲线细节

animation-timing-function : 规定动画的速度曲线,默认是“ease”
Document
描述
linear 动画从头到尾的速度是相同的。匀速
ease 默认。 动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() 指定了时间函数中的间隔数量(步长)

速度曲线步长命令:

!DOCTYPE html>


    
    
    
    Document
    


    
速度曲线步

网页显示图:

CSS3中的动画_第7张图片

你可能感兴趣的