• 【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )

    文章目录





    一、CSS3 动画属性



    1、CSS3 常见动画属性简介


    CSS3 中动画使用 @keyframes 关键字 定义 动画 ;

    @keyframes element-move {  
  0% { transform: translateX(500px); }  
  100% { transform: translateX(0); }  
}  

    • 1
    • 2
    • 3
    • 4

    在 @keyframes 定义的动画中 , 可以设置一系列的 CSS 属性 , 用于控制动画的运行 , 常见的属性如下 : ( 下面的动画属性是设置在 执行动画 的 标签元素 样式中的 )

    • animation-name 属性 : 设置在 @keyframes 定义动画时的 动画名称 , 一般在调用动画的 标签元素 中使用 , 用于定义动画执行哪些关键帧 , 该属性是调用动画必须要设置的 ;
            div {
            /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
            animation-name: element-move;
        }

    • 1
    • 2
    • 3
    • 4
    • animation-duration 属性 : 设置 CSS3 动画的持续时间 , 默认为 0 ;
      • 单位可以是 秒 s ;
      • 单位也可以是 毫秒 ms ;
            div {
            /* 设置动画执行时间 2 秒 */
            animation-duration: 2s;
        }

    • 1
    • 2
    • 3
    • 4
    • animation-timing-function 属性 : 设置动画的 " 时间函数 " , 该函数体现了动画的速度变化曲线 ; 常见的值有
      • linear 线性
      • ease 缓入缓出
      • ease-in 缓入
      • ease-out 缓出
            div {
            /* 设置动画运动曲线 ease 缓入缓出 */
            animation-timing-function: ease;
        }

    • 1
    • 2
    • 3
    • 4
    • animation-delay 属性 : 设置动画的延迟时间 , 延迟指定的时间后 , 再执行动画 ;
      • 单位可以是 秒 s ;
      • 单位也可以是 毫秒 ms ;
            div {
            /* 设置动画开始时间 1 秒后开始 */
            animation-delay: 1s;
        }

    • 1
    • 2
    • 3
    • 4
    • animation-iteration-count 属性 : 设置 CSS3 动画 执行的 重复次数 ;
      • 可设置具体的次数 , 如 : 2 , 100 ;
      • 如果设置 无限次 , 可设置 infinite 属性值 ;
            div {
            /* 设置动画执行次数 无限循环播放 */
            animation-iteration-count: infinite;
        }

    • 1
    • 2
    • 3
    • 4
    • animation-direction 属性 : 设置 动画的 播放方向 ; 常见的值如下 :
      • normal 正常播放
      • reverse 反向播放
      • alternate 交替播放
            div {
            /* 设置动画播放方向 交替播放 一次正向一次反向 */
            animation-direction: alternate;
        }

    • 1
    • 2
    • 3
    • 4
    • animation-fill-mode 属性 : 设置 动画 播放后 的状态 ; 常见的值如下 :
      • none 不改变元素样式
      • forwards 保持动画结束时的样式
      • backwards 保持动画开始时的样式 , 回到起始点 ;
            div {
            /* 设置动画执行完毕后的状态 回到起始状态 */
            animation-fill-mode: backwards;
        }

    • 1
    • 2
    • 3
    • 4
    • animation-play-state 属性 : 设置 动画 播放状态 , 常见的值如下 :
      • running 运行中
      • paused 暂停
            div {
            /* 设置动画当前的播放状态 运行状态 */
            animation-play-state: running;
        }

    • 1
    • 2
    • 3
    • 4

    2、代码示例 - CSS3 常见动画属性使用


    代码示例 :

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 动画属性title>
    <style>
        @keyframes element-move {
            0% {
                transform: translateX(500px);
            }
            100% {
                transform: translateX(0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
            animation-name: element-move;
            /* 设置动画执行时间 2 秒 */
            animation-duration: 2s;
            /* 设置动画运动曲线 ease 缓入缓出 */
            animation-timing-function: ease;
            /* 设置动画开始时间 1 秒后开始 */
            animation-delay: 1s;
            /* 设置动画执行次数 无限循环播放 */
            animation-iteration-count: infinite;
            /* 设置动画播放方向 交替播放 一次正向一次反向 */
            animation-direction: alternate;
            /* 设置动画执行完毕后的状态 回到起始状态 */
            animation-fill-mode: backwards;
            /* 设置动画当前的播放状态 运行状态 */
            animation-play-state: running;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 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
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    执行效果 : 网页运行后 , 下面的小方块 无限循环 左右 往复运动 ;

    在这里插入图片描述





    二、CSS3 动画属性简写方式



    1、CSS3 动画属性简写语法


    CSS3 动画属性简写 语法 :

    animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 播放方向 结束状态;
animation: name duration timing-function delay iteration-count direction fill-mode;

    • 1
    • 2

    上述简写的各个属性之间 , 使用空格隔开 ;

    动画属性中 , 除了 animation-play-state 属性之外 , 其它动画属性都可以简写到 animation 属性中 ;

    animation-play-state 属性 控制 动画开始暂停 , 一般需要根据代码逻辑单独控制 ;


    animation 简写属性 中各属性对应关系 :

    • 动画名称 : animation-name , @keyframes 动画的名称 ;
    • 持续时间 : animation-duration , 动画运行一个周期所花费的时间 , 单位 秒 / 毫秒 ;
    • 运动曲线 : animation-timing-function , 动画运行曲线 , 默认 ease 缓入缓出 ;
    • 开始时间 : animation-delay , 动画开始运行的时间 , 单位 秒 / 毫秒 ;
    • 播放次数 : animation-iteration-count , 动画播放次数 , 默认 1 , 无限循环播放 infinite ;
    • 播放方向 : animation-direction , 动画播放方向 , 正 / 反 / 交替 ;
    • 结束状态 : animation-fill-mode , 动画运行开始结束后的状态 ;

    2、animation 简写动画属性提示


    在编写 animation 简写动画属性时 , 如果没有记住顺序 , 可以在 输入 anim 之后 , 发现下面的提示 ,

    在这里插入图片描述
    然后在第一个提示位置 , 敲回车 , 即可生成如下代码 :

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

    • 1

    在这里插入图片描述
    然后根据上述代码提示 , 填充每个 动画属性值 ;


    3、动画属性简写形式与原形式对比


    原来设置动画属性需要的代码 :

                /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
            animation-name: element-move;
            /* 设置动画执行时间 2 秒 */
            animation-duration: 2s;
            /* 设置动画运动曲线 ease 缓入缓出 */
            animation-timing-function: ease;
            /* 设置动画开始时间 1 秒后开始 */
            animation-delay: 1s;
            /* 设置动画执行次数 无限循环播放 */
            animation-iteration-count: infinite;
            /* 设置动画播放方向 交替播放 一次正向一次反向 */
            animation-direction: alternate;
            /* 设置动画执行完毕后的状态 回到起始状态 */
            animation-fill-mode: backwards;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    使用动画的简写形式 , 只需一行代码即可实现 :

                /* 使用简写形式设置动画属性 */
            animation: element-move 2s ease 1s infinite alternate backwards;

    • 1
    • 2

    4、代码示例 - CSS3 动画属性简写示例


    代码示例 :

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 动画属性title>
    <style>
        @keyframes element-move {
            0% {
                transform: translateX(500px);
            }
            100% {
                transform: translateX(0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 使用简写形式设置动画属性 */
            animation: element-move 2s ease 1s infinite alternate backwards;
            /* 设置动画当前的播放状态 运行状态 */
            animation-play-state: running;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 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

    执行结果 : 在网页中的小方块左右往复运动 ;

    在这里插入图片描述

  • 相关阅读:
    解决Windows下调试RTKLIB打开串口失败的问题
    PAT 1029 旧键盘
    全新一代智慧园区数字孪生解决方案，为园区运营商和集成商赋能！
    4G RTU水文数据采集终端应用在水文监测终端系统
    私服下载失败，下载不下来
    SSD服务
    C# 关于sendtoback()和bringtofront() 的特点说明
    双十一哪款蓝牙耳机值得入手？音质超棒的蓝牙耳机推荐
    既然有 HTTP 协议，为什么还要有 RPC
    RNN/LSTM学习记录
  • 原文地址：https://blog.csdn.net/han1202012/article/details/132180305