14. css3中的动画功能
2019-09-27 本文已影响0人
瑟闻风倾
(1) transition属性
eg1：一个动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
div{
background-color: yellow;
/*transition: background-color 1s linear;*/
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: linear;
}
/*鼠标滑过事件*/
div:hover{
background-color: #FF8C00;
}
</style>
</head>
<body>
<div>示例</div>
</body>
</html>
eg2：同时执行多个动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
div{
background-color: yellow;
color: black;
width: 100px;
/*transition: background-color 1s linear;*/
/*transition-property: background-color;*/
/*transition-duration: 1s;*/
/*transition-timing-function: linear;*/
transition: background-color 1s linear,color 1s linear,width 1s linear,transform 1s linear;
}
/*鼠标滑过事件*/
div:hover{
background-color: #FF8C00;
color: white;
width: 200px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>动画示例</div>
</body>
</html>
(2) animations属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animations-复杂动画</title>
<style>
div{
background-color: red;
}
@-webkit-keyframes mycolor {
/*开始帧*/
0%{
background-color: red;
}
/*背景颜色变化帧-黄色*/
40%{
background-color: #ffff00;
}
/*背景颜色变化帧-蓝色*/
70%{
background-color: aqua;
}
/*结束帧*/
100%{
background-color: red;
}
}
div:hover{
/*-webkit-animation-name: mycolor;*/
/*-webkit-animation-duration: 5s;*/
/*-webkit-animation-timing-function: linear;*/
-webkit-animation: mycolor 5s linear;
}
</style>
</head>
<body>
<div>复杂动画示例</div>
</body>
</html>
备注：transition和animations都是通过改变元素的属性值来实行动画效果，它们的区别在于
- transition定义元素的开始属性和结束属性并进行平滑的过度，只能实现简单的动画
- animations可以定义多个关键帧的属性值，可以实现复杂的动画
(3) 实现多个属性值同时改变的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现多个属性值同时改变的动画</title>
<style>
div{
position: absolute;
background-color: red;
top: 100px;
width: 500px;
}
@-webkit-keyframes mycolor {
0%{
background-color: red;
transform: rotate(0deg);
}
30%{
background-color: aqua;
transform: rotate(30deg);
}
60%{
background-color: lightblue;
transform: rotate(-30deg);
}
100%{
background-color: red;
transform: rotate(0deg);
}
}
div:hover{
/*-webkit-animation-name: mycolor;*/
/*-webkit-animation-duration: 5s;*/
/*-webkit-animation-timing-function: linear;*/
-webkit-animation: mycolor 5s linear;
}
</style>
</head>
<body>
<div>实现多个属性值同时改变的动画</div>
</body>
</html>
备注： 实现动画的方法
- linear：动画匀速变化
- ease：动画从慢到快，再从快到慢变化
- ease-in：动画从慢到快变化
- ease-out：动画从快到慢变化
- ease-in-out：和ease效果一致
