css3 animation动画属性笔记

原创 PHP笔记  2017-09-15 18:36  阅读 788 views 次

css中,animation属性是是一个简写属性,是用来设置动画属性

animation属性值

注意:以上除了initial和inherit以外,都是动画的属性,并不是animation属性的值,animation属性是一个简写属性,是用来设置以上动画属性,其值是以上属性的属性值的组合。

animation属性语法格式:

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

说明:animation属性语法格式中的属性值并不是全部都要有,根据要到达的动画效果选择。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation属性笔记</title>
<style>
#a
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 8s infinite;
}
@keyframes mymove /*使div块向下移动*/
{
from {left:0px;}
to {left:300px;}
}
</style>
<head/>
<body>
<div id="a"></div>
</body>
</html>

运行结果:

本文地址:https://www.ggbiji.com/css-animation.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情