文章: 阅读:

CSS Animation 动画

CSSCSS

前言

  • CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

  • 一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

  • 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

属性 描述 CSS 备注 🔗
@keyframes 规定动画 3 🔗
animation 所有动画属性的简写属性 3 🔗
animation-name 规定 @keyframes 动画的名称 3 🔗
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0 3 🔗
animation-timing-function 规定动画的速度曲线。默认是 “ease” 3 🔗
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 3 🔗
animation-delay 规定动画何时开始。默认是 0 3 🔗
animation-iteration-count 规定动画被播放的次数。默认是 1 3 🔗
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal” 3 🔗
animation-play-state 规定动画是否正在运行或暂停。默认是 “running” 3 🔗

  • 刷新页面查看下面元素的动画效果：



    CSS3

    动画

1、@keyframes 规则

  • 要创建 CSS3 动画，需要了解 @keyframes 规则。

  • @keyframes 规则是创建动画。

  • @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

1.1 实例

  • 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

  • 指定至少这两个 CSS3 的动画属性绑定向一个选择器：

    • 规定动画的名称
    • 规定动画的时长

  • 注意: 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是 0。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            
            animation: myfirst 5s;
            -webkit-animation: myfirst 5s; /* Safari and Chrome */
        }
        @keyframes myfirst {
            from {background: red;}
            to {background: yellow;}
        }
        @-webkit-keyframes myfirst { /* Safari and Chrome */
            from {background: red;}
            to {background: yellow;}
        }
    </style>
    1
    <div></div>

  • 效果



  • 刷新页面查看动画效果。

2、动画

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

  • 用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

  • 为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

2.1 多次变化

  • 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变。

  • 当动画完成时，会变回初始的样式。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst 5s;
            -moz-animation: myfirst 5s; /* Firefox */
            -webkit-animation: myfirst 5s; /* Safari and Chrome */
            -o-animation: myfirst 5s; /* Opera */
        }
        @keyframes myfirst {
            0% {background: red;}
            25% {background: yellow;}
            50% {background: blue;}
            100% {background: green;}
        }
        @-moz-keyframes myfirst { /* Firefox */
            0% {background: red;}
            25% {background: yellow;}
            50% {background: blue;}
            100% {background: green;}
        }
        @-webkit-keyframes myfirst { /* Safari and Chrome */
            0% {background: red;}
            25% {background: yellow;}
            50% {background: blue;}
            100% {background: green;}
        }
        @-o-keyframes myfirst { /* Opera */
            0% {background: red;}
            25% {background: yellow;}
            50% {background: blue;}
            100% {background: green;}
        }
    </style>
    1
    <div></div>

  • 效果



  • 刷新页面查看动画效果。

2.2 改变背景色和位置

  • 改变背景色和位置。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: myfirst 5s; /* Safari and Chrome */
        }
        @keyframes myfirst {
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
        @-webkit-keyframes myfirst { /* Safari and Chrome */
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
    </style>
    1
    <div></div>

  • 效果



  • 刷新页面查看动画效果。

3、简写

属性 描述 CSS 备注 🔗
animation 所有动画属性的简写属性 3 🔗

  • 语法

    1
    animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • 属性值

值 描述
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数
animation-direction 指定是否应该轮流反向播放动画
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state 指定动画是否正在运行或已暂停
initial 设置属性为其默认值
inherit 从父元素继承属性

  • 简写实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s linear 2s infinite alternate; /* Firefox: */
            -moz-animation: myfirst 5s linear 2s infinite alternate; /* Safari and Chrome: */
            -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */
            -o-animation: myfirst 5s linear 2s infinite alternate;
        }
        @keyframes myfirst {
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
        @-moz-keyframes myfirst { /* Firefox */
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
        @-webkit-keyframes myfirst { /* Safari and Chrome */
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
        @-o-keyframes myfirst { /* Opera */
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
    </style>
    1
    <div></div>

  • 全写实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running; /* Safari and Chrome: */
            -webkit-animation-name: myfirst;
            -webkit-animation-duration: 5s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
        @keyframes myfirst {
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
        @-webkit-keyframes myfirst { /* Safari and Chrome */
            0% {background: red; left: 0px; top: 0px;}
            25% {background: yellow; left: 200px; top: 0px;}
            50% {background: blue; left: 200px; top: 200px;}
            75% {background: green; left: 0px; top: 200px;}
            100% {background: red; left: 0px; top: 0px;}
        }
    </style>

  • 效果



4、动画属性

  • CSS 中的动画属性：
属性 备注 实例 🔗 属性 备注 实例 🔗 属性 备注 实例 🔗
background 实例 🔗
column-gap 实例 🔗
min-width 实例 🔗
background-color 实例 🔗
column-rule 实例 🔗
opacity 实例 🔗
background-position 实例 🔗
column-rule-color 实例 🔗
order 实例 🔗
background-size 实例 🔗
column-rule-width 实例 🔗
outline 实例 🔗
border 实例 🔗
column-width 实例 🔗
outline-color 实例 🔗
border-bottom 实例 🔗
columns 实例 🔗
outline-offset 实例 🔗
border-bottom-color 实例 🔗
filter 实例 🔗
outline-width 实例 🔗
border-bottom-left-radius 实例 🔗
flex 🔗
padding 实例 🔗
border-bottom-right-radius 实例 🔗
flex-basis 实例 🔗
padding-bottom 实例 🔗
border-bottom-width 实例 🔗
flex-grow 实例 🔗
padding-left 实例 🔗
border-color 实例 🔗
flex-shrink 实例 🔗
padding-right 实例 🔗
border-left 实例 🔗
font 实例 🔗
padding-top 实例 🔗
border-left-color 实例 🔗
font-size 实例 🔗
perspective 实例 🔗
border-left-width 实例 🔗
font-size-adjust 🔗
perspective-origin 实例 🔗
border-right 实例 🔗
font-stretch 🔗
right 实例 🔗
border-right-color 实例 🔗
font-weight 实例 🔗
text-decoration-color 实例 🔗
border-right-width 实例 🔗
height 实例 🔗
text-indent 实例 🔗
border-spacing 实例 🔗
left 实例 🔗
text-shadow 实例 🔗
border-top 实例 🔗
letter-spacing 实例 🔗
top 实例 🔗
border-top-color 实例 🔗
line-height 实例 🔗
transform 实例 🔗
border-top-left-radius 实例 🔗
margin 实例 🔗
transform-origin 实例 🔗
border-top-right-radius 实例 🔗
margin-bottom 实例 🔗
vertical-align 实例 🔗
border-top-width 实例 🔗
margin-left 实例 🔗
visibility 🔗
bottom 实例 🔗
margin-right 实例 🔗
width 实例 🔗
box-shadow 实例 🔗
margin-top 实例 🔗
word-spacing 实例 🔗
clip 实例 🔗
max-height 实例 🔗
z-index 实例 🔗
color 实例 🔗
max-width 实例 🔗
column-count 实例 🔗
min-height 实例 🔗

5、浏览器支持

属性
@keyframes 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-06 20:15


评论


文章目录
  1. 1. 前言
  2. 2. 1、@keyframes 规则
    1. 2.1. 1.1 实例
  3. 3. 2、动画
    1. 3.1. 2.1 多次变化
    2. 3.2. 2.2 改变背景色和位置
  4. 4. 3、简写
  5. 5. 4、动画属性
  6. 6. 5、浏览器支持
隐藏目录