CSS3 动画 animation（二）

最新推荐文章于 2022-11-25 14:52:08 发布

李任贤

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量186

点赞数

分类专栏：原创 javascript CSS3 前端动画文章标签： CSS3 animation 动画前端

本文链接：https://blog.csdn.net/LiRenxian0316/article/details/81122640

版权

原创同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

这是一个比较简单的例子

先看一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 动画</title>
    <style>
        div {
	    width: 200px;
	    height: 200px;
	    background-color:red;
	    position: relative;

	    animation-name: an;			    /*  动画名称       */
	    animation-duration:5s;		    /*  运动时间为5s   */
	    animation-timing-function:linear;	    /*  运动速度曲线   */
	    animation-delay:0;			    /*  动画延除时间   */
	    animation-iteration-count:infinite;     /*  动画执行次数   */
	    animation-direction:alternate;          /*  动画逆向运动，这个是奇正，偶反的   */
        }
        @keyframes an {
	    0%  {background-color: red;left:0;top:0;}
	    35% {background-color: blue;left:300px;top:0;}
	    55% {background-color: yellow;left:300px;top: 300px;}
	    75% {background-color: pink;left:0;top:300px;}
	    100% {background-color: red;left:0;top:0;}
        }
        @-webkit-keyframes an {
	    0%  {background-color: red;left:0;top:0;}
	    35% {background-color: blue;left:300px;top:0;}
	    55% {background-color: yellow;left:300px;top: 300px;}
	    75% {background-color: pink;left:0;top:300px;}
	    100% {background-color: red;left:0;top:0;}
        }
</style>
</head>
<body>
    <div></div>
</body>
</html>

上次在@keyframes 中只是用了from与to作为开始与结束，这次用的是百分比，这个是最常用的了，可以很方便地控制进度。

其实它们还有简写属性的：

animation一共有八个属性，其中有七个是可以简写成animation的。

另外一个不能简写的属性是animation-play-state属性

以上例子可以简写成，如下：

6行的代码一行就搞定了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
    div {
	width: 200px;
	height: 200px;
	background-color:red;
	position: relative;

	animation: an 5s linear 1s infinite alternate;  /* 这是简写的 */ 
    }
    @keyframes an {
	0%  {background-color: red;left:0;top:0;}
	35% {background-color: blue;left:300px;top:0;}
	55% {background-color: yellow;left:300px;top: 300px;}
	75% {background-color: pink;left:0;top:300px;}
	100% {background-color: red;left:0;top:0;}
    }
    @-webkit-keyframes an {
	0%  {background-color: red;left:0;top:0;}
	35% {background-color: blue;left:300px;top:0;}
	55% {background-color: yellow;left:300px;top: 300px;}
	75% {background-color: pink;left:0;top:300px;}
	100% {background-color: red;left:0;top:0;}
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

当然他们还是有默认值的：

上面动画中的用到的属性的默认值分别，如下：

animation-duration:0 即是动画开始到结束默认是立刻结束的

animation-timing-function:ease 即是开始时慢，然后加快，在要结束前又变慢，慢---->快---->慢

animation-delay:0 即是立刻运动

animation-iteration-count:1 即是动画只运动一次

animation-direction:normal 即是动画正常运动

李任贤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 动画 animation（二）

这是一个比较简单的例子先看一个简单的例子&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3 动画&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫

专栏目录