CSS3 基础（7）—— CSS3动画（animation）

最新推荐文章于 2024-04-17 01:37:33 发布

poorpenguin

最新推荐文章于 2024-04-17 01:37:33 发布

阅读量2.1k

点赞数

分类专栏：前端 CSS3

本文链接：https://blog.csdn.net/weixin_39141044/article/details/82352789

版权

一、动画animation

人类拥有“视觉停留”的特效，也就是人的眼睛看到东西，会在视网膜上存在0.34不会消失。
在前一幅画在脑子里消失前播放下一幅，就会给人造成一种流畅的视觉变化效果。

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

兼容性

ie10+、firefox16+、chrome43+、safari9+、opera30+、android（-webkit-）
手机设备的浏览器再使用css3动画时，要加上webkit前缀。

（一）.动画的属性

animation-name 设置动画应用的名称
animation-duration 设置动画持续时间
animation-timing-function 设置对象动画的过渡类型
animation-delay 设置动画的延迟
animation-iteration-count 设置动画循环次数
animation-direction 设置动画的运动方向（正放还是倒放）
animation-fill-mode 设置对象不播放动画时的状态
animation-play-state 设置动画的播放和暂停
animation 综合写法

1.animation-name

设置对象所应用的动画名称
必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

语法

animation-name：<single-animation-name>[,<single-animation-name>]*

2.animation-duration 动画持续时间

索或设置对象动画的持续时间。

语法

animation-duration: time;

参数说明：time指定动画播放完成花费的时间。默认为0，意味这没有动画效果。
动画必须要写的属性，动画的名称和时间。name和duration。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            font-family: 'Microsoft Yahei';
            font-size: 60px;
            font-weight: bold;
            line-height: 600px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 800px;
            height: 600px;
            margin: auto;
            text-align: center;
            border: 5px solid #000;
            border-radius: 50%;
            animation-name: banner;
            animation-duration: 5s;
       }
       @keyframes banner{
            from{
    opacity: 0}
            to{
    opacity: 1}
       }


   </style>
</head>
<body>
    <div>苟利国家生死以</div>
</body>
</html>

3.animation-timing-function 设置动画过渡类型

语法

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | 
                            steps | cubic-bezier

参数说明
常用的

linear:线性过度。
ease:平滑过度。
ease-in:由慢到快。
ease-out:由快到慢。
ease-in-out:由慢到快又变慢。

不常用：

step-start等同于steps(1,start);
step-end等同于steps(1,end);
steps
cubic-bezier(num,num,num,num)贝塞尔曲线取值0-1之间。

4.animation-delay 设置动画延时

语法

animation-delay：time（单位可以是s也可以是ms）

参数说明：
可选。定义动画开始前等待时间，以秒或毫秒计数，默认值为0。

时间可以为负值，意思是跳过指定的时间。

例如

            animation-duration: 3s; //当前动画执行3秒
            animation-delay: -2s; //动画立即开始，并跳过前2秒的动画，直接显示第3秒的动画

当前动画

PS：延迟不算动画周期耗时，动画完成一个周期耗时是animation-duration的值。

5.animation-iteration-count 设置动画循环次数

检索或设置对象动画的循环次数。

语法

animation-iteration-count: infinite（无限循环） | <number>;

参数说明：<number>为数字，其默认值为1；infinite为无限次数循环。只循环duration的期间。delay时间不算在内。

例子

旋转的太极图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <s

最低0.47元/天解锁文章

poorpenguin

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3 基础（7）—— CSS3动画（animation）

一、动画animation人类拥有“视觉停留”的特效，也就是人的眼睛看到东西，会在视网膜上存在0.34不会消失。在前一幅画在脑子里消失前播放下一幅，就会给人造成一种流畅的视觉变化效果。而css3动画是使元素从一种样式逐渐变化为另一种样式的效果，css3动画中我们可以改变任意多的样式任意多的次数。兼容性ie10+、firefox16+、chrome43+、safari9+、o...
复制链接

扫一扫