KHL 005 11-计算机-本职-前台 CSS3 动画

来源：互联网发布：虚拟机网络连接不上编辑：程序博客网时间：2024/06/06 04:27

-10

animation 动画效果组成

通过类似Flash动画中的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果

animation的子属性

animation-name : 主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画，从而执行动画。
animation-duration : 主要用来设置动画播放所需时间，一般以秒为单位
animation-timing-functoin : 主要用来设置动画的播放方式，与transition-timing-function类似
animation-delay : 主要用来指定动画开始时间，一般以秒为单位
animation-iteration-count : 主要用来指定动画播放的循环次数
animation-direction : 主要用赤指定动画的播放方向
animation-play-state : 主要用赤控制动画的播放状态
animation-fill-mode : 主要用来设置动画的时间外属性

animation 语法

animation : [<animation-name> || <animation-duration > || <animation-timing-functoin > || <animation-delay > || <animation-iteration-count > ||  <animation-direction > || <animation-play-state > || <animation-fill-mode>]*

关键帧

@keyframes语法

@keyframes IDENT{    from {        /* CSS 样式写在这里 */    }    percentage {        /* CSS 样式写在这里 */    }    to {        /* CSS 样式写在这里 */    }}

其中 from 和 to 也可以换成 0% 和 100%，需要注意的是 0%的 ‘%’ 不能省略

其中IDENT就是一个动画名称，可以取一个任意定义的动画名称，当然语义化一点会更好。percentage是一个百分比值，用来定义某个时间段的动画效果，可以有多个。

animation 子属性详解

animation-name

IDENT : 是由@keyframes创建的动画名称，换句话说此处的IDENT需要和@keyframes中的IDENT一致，如果不一致则没有任何动画效果
none ：默认值，可以用于覆盖任何动画

animation-duration

用于指定动画所持续的时间，也就是完成0%到100%一次动画所需要的时间，单位为s或ms

animation-timing-function

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay

用来定义动画开始播放的时间、是延迟还是提前等

animation-iteration-count

用来定义动画的播放次数

infinite : 无限循环
number : 具体次数

animation-direction

用来设置动画的播放方向

normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state

用来控制动画的播放状态

running：运动
paused：暂停

animation-fill-mode

定义动画开始之前和结束之后发生的操作

none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态

CSS3动画示例

简单示例 1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" type="text/css" href="../assets/css/reset.css" />    <style type="text/css">        body{            padding: 30px;        }        @keyframes myfirst{            from{                background-color: red;            }            to{                background-color: yellow;            }        }        #one{            width: 200px;            height: 200px;            background-color: red;            animation: myfirst 5s;            animation-name: myfirst;            animation-duration: 5s;            animation-iteration-count: infinite;        }    </style></head><body><div id="one"></div></body></html>

这里写图片描述

其效果是div的颜色在红色与黄色之间不断变化

简单示例 2

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" type="text/css" href="../assets/css/reset.css" />    <style type="text/css">        body{            padding: 30px;        }        #two-container{            position: absolute;            width: 800px;            height: 30px;            border: 1px solid red;            overflow: hidden;        }        @keyframes mytwo {            from{                left: -100px;            }            to{                left: 800px;            }        }        #two{            height: 100%;            width: 100px;            background: blue;            position: relative;            left: -100px;            animation-name: mytwo;            animation-duration: 5s;            animation-iteration-count: infinite;            animation-timing-function: linear;        }    </style></head><body><div id="two-container">    <div id="two"></div></div></body></html>

这里写图片描述

其效果是蓝色的div在给框内不断重复从左向右移动的过程

阅读全文

0 0