CSS3动画

CSS3动画属性
  • CSS3中,动画效果使用animation属性来实现。animation属性和transition属性功能是相同的,都是通过改变元素的“属性值”来实现动画效果。但是这两者又有很大的区别:transition属性只能通过指定属性的开始值与结束值,然后在这两个属性值之间进行平滑过渡来实现动画效果,因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果

@keyframes简介

  • 使用animation属性定义CSS3动画需要2步:
    (1)定义动画;
    (2)调用动画;
  • CSS3中,在使用动画之前,我们必须使用@keyframes规则定义动画。
  • 语法:
<style type="text/css">
@keyframes 动画名 {
    0% {
        ……
    }
    100% {
        …… 
    }
}
</style>
  • 说明:0%表示动画的开始,100%表示动画的结束。0%100%是必须的,不过在一个@keyframes规则中可以由多个百分比构成,每一个百分比都可以定义自身的CSS样式,从而形成一系列的动画效果
  • 小技巧:使用@keyframes规则时,如果仅仅只有0%100%这两个百分比的话,这时0%100%还可以使用关键词fromto来代表,其中0%对应的是from100%对应的是to
  • 举例:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 @keyframes</title>
    <style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        div
        {
            width:100px;
            height:100px;
            border-radius:50px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
  • 分析:
    • (1)定义动画
    • 这里我们使用@keyframes规则定义了一个名为mycolor的动画,刚刚开始时背景颜色为红色,从0%30%之间背景颜色从红色变为蓝色,然后从30%60%之间背景颜色从蓝色变为黄色,最后在60%100%之间背景颜色从蓝色变为绿色。动画执行完毕,背景颜色回归红色(初始值)
    • 很多新手会有疑问,这些百分比是什么意思,是相对什么来说的呢?哪还有什么,肯定是相对“持续时间animation-duration啦!例如这个例子里面,我们定义持续时间为5s,则0%指的是0s(开始时),30%指的是1.5s的时候,60%指的是3s的时候,100%则指的是5s(结束时)。假如我们定义持续时间为10s,那么0%指的是0s(开始时),30%指的是3s的时候,60%指的是6s的时候,而100%则指的是10s(结束时)以此类推
    • (2)调用动画
    • 我们可以使用@keyframes规则定义动画,但是这样定义的动画并不会自动执行,我们还需要“调用动画”,这样动画才会生效。其实这就跟JavaScript的函数一样,首先必须定义函数,然后只有调用函数,函数才会执行生效。这个例子中,我们设置在鼠标移动到div元素时(div:hover)使用animation-name属性调用动画名,然后使用animation-duration属性定义动画持续总时间、animation-timing-function属性定义动画函数等

调用动画animation-name

  • CSS3中,使用@keyframes规则定义的动画并不会自动执行,我们还需要使用animation-name属性来调用动画,之后动画才会生效。
  • 语法:animation-name:动画名;
  • 说明:注意,animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果

持续时间animation-duration

  • CSS3中,我们可以使用animation-duration属性来设置动画的持续时间,也就是完成从0%100%所使用的总时间。animation-duration属性跟CSS3过渡中的transition-duration属性相似
  • 语法:animation-duration:时间;
  • 说明:animation-duration属性取值是一个时间,单位为s(秒),可以为小数如0.5s
  • CSS3动画很多时候都是跟CSS3变形结合起来,然后实现绚丽复杂的动画效果

播放方式animation-timing-function

  • CSS3中,我们可以使用animation-timing-function属性来设置动画的播放方式,所谓的“播放方式”主要用来指定动画在播放时间内的速率
  • 语法:animation-timing-function:取值;
  • 说明:animation-timing-function属性取值跟transition-timing-function属性取值一样,共有5种,具体如下:
    animation-timing-function属性取值
  • 举例:
<!DOCTYPE html> 
<html lang="en">
<head>
    <title>CSS3 animation-timing-function属性</title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>
  • 通过这个例子,我们可以直观地比较出这5种播放方式的不同。大家在实际开发,根据自己想要的效果自行选取哪一种播放方式。

延迟时间animation-delay

  • CSS3中,我们可以使用animation-delay属性来定义动画播放的延迟时间。其中,animation-delay属性跟CSS3过渡中的transition-delay属性相似
  • 语法:animation-delay:时间;
  • 说明:animation-delay属性取值是一个时间,单位为s(秒),可以为小数如0.5s
  • animation-delay属性默认值为0,也就是说当我们没有设置animation-delay属性时,CSS3动画就没有延迟时间

播放次数animation-iteration-count

  • CSS3中,我们可以使用animation-iteration-count属性来定义动画的播放次数。
  • 语法:animation-iteration-count取值;
  • 说明:animation-iteration-count属性取值有2种:
    (1)正整数;
    (2)infinite;
  • animation-iteration-count属性默认值为1。也就是默认情况下,动画从开始到结束只播放一次。“animation-iteration-count:n”表示动画播放n次,n为正整数;当animation-iteration-count属性取值为infinite时,动画会无限次地循环播放

播放方向animation-direction

  • CSS3中,我们可以使用animation-direction属性定义动画的播放方向。
  • 语法:animation-direction取值;
  • 说明:animation-direction属性取值如下:
    animation-direction属性取值

动画播放状态animation-play-state

  • CSS3中,我们可以使用animation-play-state属性来定义动画的播放状态。
  • 语法:animation-play-state取值;
  • 说明:animation-play-state属性取值只有2个:runningpaused
    (1)running 播放动画(默认值)
    (2)paused 暂停动画

时间外属性animation-fill-mode

  • CSS3中,我们可以使用animation-fill-mode属性定义在动画开始之前和动画结束之后发生的事情
  • 语法:animation-fill-mode取值;
  • 说明:animation-fill-mode属性取值如下:
    animation-fill-mode属性取值
  • 举例
<!DOCTYPE html> 
<html lang="en">
<head>
    <title>CSS3 animation-fill-mode属性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
            -webkit-animation-duration:2s;
        }
        #div2
        {
            -webkit-animation-fill-mode:forwards;
        }
        #div3
        {
            -webkit-animation-fill-mode:backwards;
        }
        #div4
        {
            -webkit-animation-fill-mode:both;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>
  • 一般情况下,对于animation-fill-mode属性,我们只会用到forwardsbackwards这两个属性值。而对于如何理解“animation-fill-mode:both;”,可以找度娘亲热一下,反正这个属性值也没什么卵用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249