CSS3中可以实现简单的动画效果,在此之前要实现过渡效果,从一个个的小画面过度连续起来才能在人眼的视觉暂留下成为动画。
1.过渡效果的实现:transition
过渡效果用来描述两个状态间的转化过程,这两个状态是什么?转化时间有多长?由什么触发转化过程?这都是我们要考虑的问题。
属性 | 描述 | 使用 |
---|---|---|
transition | 总属性 | 属性名+持续时间+过渡函数,如:transition: all 0.5s linear; |
transition-property | 属性名,对哪些属性名进行变化 | transition-property:color height; |
transition-duration | 持续时间,以s为单位 | transition-duration:1s; |
transition-timing-funtion | 过渡使用的函数 | transition-timing-funtion:linear; 函数有:linear(匀速),ease(慢快慢),ease-in(慢快),ease-out(快慢),ease-in-out(慢快慢) |
下面看一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3过渡</title>
<style type="text/css">
#container{
margin: 0 auto;
width: 600px;
height: 500px;
background-color:#008B8B;
border-radius: 5px;
}
#main{
padding: 5px;
margin: 5px;
height: 40px;
width: 120px;
line-height: 40px;
text-align: center;
border-radius: 5px;
background-color: silver;
position: relative;
top: 200px;
left: 200px;
transition:all 0.5s linear;
}
#main:hover{
color:white;
background-color: #45B823;
}
</style>
</head>
<body>
<div id="container">
<div id="main">Web Design</div>
</div>
</body>
</html>
未悬停时
鼠标悬停
2.动画效果的实现:animation
动画由一帧帧的图片连续变化而成,过程中我们要先定义动画,然后再讲他们连续起来.
(1) 定义动画:@keyframes关键帧规则
(2) 调用动画:用hover触发,animation属性来调用
animation:动画名 持续时间 动画函数 播放方式
动画名:animation-name
持续时间:animation-duration
动画函数:animation-timing-function(和transition的函数一致)
动画方式: animation-play-state(当前动画正在播放)和paused(当前动画播放完毕)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3动画</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#container{
width: 650px;
height: 470px;
border-radius: 10px;
background-color: #2F4F4F;
margin: 10px;
}
#main{
width: 500px;
height: 350px;
border-radius: 10px;
background-color: #0066FF;
position:relative;
top:50px;
left: 75px;
}
@keyframes frames{
0% {background: url("images/Weixin.png") repeat; }
100% {background: url("images/Google.png") repeat;}
50% {background:url("images/Tencent.png") repeat;}
}
#main:hover{
animation: frames 5s linear;
}
</style>
</head>
<body>
<div id="container">
<div id="main"></div>
</div>
</body>
</html>