css3动画属性,让你的元素动起来叭

·  阅读 233

CSS3 animation 属性

(详情参考: www.w3school.com.cn/cssref/pr_a…)

一、浏览器需知:

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。(WebKit 是一个开源浏览器引擎)

注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。

二、animation 属性是一个简写属性,用于设置如下六个动画属性,可写在一起(下面会挑几个本人理解的够呛的重点说明一下)

例如 animation:mymove 5s infinite

其中animation-name:mymove

animation-iteration-count:infinite(无穷)

animation-duration:5s

① animation-name: 规定需要绑定到选择器的 keyframe 名称。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
复制代码

如果@KeyFrames 后面跟的名称不是和animation-name的值一样,那么将实现不了移动效果

② animation-duration:规定完成动画所花费的时间,以秒或毫秒计。(该属性必须规定,否则时长为0,将没有动画效果)

③ animation-timing-function: 规定动画的速度曲线(eg:animation-timing-function:linear即从开头到结尾以相同的速度来播放动画)。

animation-timing-function其它属性值

④ animation-delay: 规定在动画开始之前的延迟。

⑤ animation-iteration-count: 规定动画应该播放的次数。

⑥ animation-direction :规定是否应该轮流反向播放动画。

另附CSS3 transform属性

详情参考:www.w3school.com.cn/cssref/pr_t…

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

最常用的就是旋转属性transform:rotate(9deg) ,其中deg代表角度,示例如下:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:150px;
height:100px;
background-color:blue;
transform:rotate(9deg);
-webkit-transform:rotate(9deg); /* Safari 和 Chrome浏览器写法 */
}
</style>
</head>
<body>

<div>Hello World</div>

</body>
</html>
复制代码
分类:
代码人生
标签: