您的位置：首页 > Web前端 > CSS

css3动画

2016-02-28 20:16 363 查看

CSS动画分为Transition功能和Animations功能

Transition功能支持从一个属性值平滑过渡到另一个属性值：在样式代码中，如果使用Firefox浏览器，需要写成“-moz-transition”的形式；如果使用Opera浏览器，需要写成“-o-transition”形式；如果使用的是Safari或者是Chrome浏览器，需要写成“-webkit-transtion”形式。

transtion属性使用方法：transition：property duration timing-function

property表示要进行平滑过渡的属性，duration完成过渡的时间，timing-function表示通过什么方法完成过渡

同时过渡多个属性：property1 duration1 timing-function1，property2 duration2 timing-function2

不同属性之间用“，”隔开

Animations功能与Transitions功能相同，只是可以实现更复杂的动画。

Animations使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: red;
}
@-webkit-keyframes myPlay {
0%{
background-color:red ;
}
50%{
background-color:green;
}
100%{
background-color:red;
}
}
div:hover{
-webkit-animation-name:myPlay ;
-webkit-animation-duration:3s;
-webkit-animation-timing-function: linear ;
}
</style>
</head>
<body>
<div>演示</div>
</body>
</html>

也可以实现多个属性值同时改变，例子如下：

div{
background-color: red;
width:200px;
height: 200px;
}
@-webkit-keyframes myPlay {
0%{
background-color:red ;
width: 200px;
}
50%{
background-color:green;
width:300px;
}
100%{
background-color:red;
width: 200px;
}
}
div:hover{
-webkit-animation-name:myPlay ;
-webkit-animation-duration:3s;
-webkit-animation-timing-function: linear ;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航