CSS3动画

最新推荐文章于 2023-01-30 11:24:12 发布

洋毛

最新推荐文章于 2023-01-30 11:24:12 发布

阅读量235

点赞数

分类专栏： html 文章标签： css html animation html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_45968014/article/details/105135097

版权

html 专栏收录该内容

13 篇文章

订阅专栏

一.css animations两部分组成：动画关键帧和描述动画帧的css声明。

@keyframes规则：可以设置多个关键帧，每一个帧表示动画过程中的一个状态。
@keyframes规则的基本语法：

    @keyframes animationname{
    				keyframes-selector{css-styles;}
    }

animation属性：用于描述动画的css声明，指定具体动画以及动画时长等行为。
animation属性的基本语法：

animation：name duration timing-function delay iteration-count direction fil-mode paly-state;

1.animation-name属性

    -  keyframes name:规定需要绑定到选择器的keyframe的名称。
	- none：规定无动画效果。

2.animation-duration属性：规定动画完成一个周期所花费的时间

	-time值：以秒或者毫秒，默认0

3.animation-timing-function属性

 -linear：动画一直速度相同
 -ease：默认值，慢-快-慢
 -ease-in：低速开始
 -ease-out：低速结束
 -ease-in-out：低开始-低结束
 -cubic-bezier(n,n,n):自己定义值

4.animation-delay ：规定动画开始的延迟
5.animation-iteration-count：规定动画播放的次数

- n:定义播放次数的数值，默认1
- infinite：无限次数播放

6.animation-direction：规定动画是否在下一个周期逆向播放

- normal：动画正常播放
- allernate:动画应该轮流反向播放

7.animation-play-state运行或暂停

-paused:规定动画已暂停
-running:表示正在播放

8.animation-fill-mode：规定对象动画时间之外状态

-none：不改变默认行为
-forward：动画完成后，保持最后一个属性值
-backwards：在动画显示之前，应用开始属性值
-both：向前和向后填充模式都应用

下面是一个风筝转动例子：

<!DOCTYPE<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
            padding: 0;
            background-color:white;
        }
        .box{
            width: 400px;
            margin: 100px auto;
            animation: rotate 4s linear infinite;
        }
        img{
            width: 100%;
            display: block;
        }
        @keyframes rotate {
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(-360deg);
            }
        }
    </style>
</head>
<body>
<div class="box"> 
    <img src="./image/大风车.jpg" alt="">
</div>
</body>
</html>