css 动画效果

要搞就搞明白,一知半解时停止研究 损失最大
 
 
css3意义:

CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

 

重点知识

 

CSS3 @keyframes 规则

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

 

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

属性
描述
CSS

@keyframes
规定动画。
3

animation
所有动画属性的简写属性,除了 animation-play-state 属性。
3

animation-name
规定 @keyframes 动画的名称。
3

animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3

animation-timing-function
规定动画的速度曲线。默认是 "ease"。
3

animation-delay
规定动画何时开始。默认是 0。
3

animation-iteration-count
规定动画被播放的次数。默认是 1。
3

animation-direction
规定动画是否在下一周期逆向地播放。默认是 "normal"。
3

animation-play-state
规定动画是否正在运行或暂停。默认是 "running"。
3

animation-fill-mode
规定对象动画时间之外的状态。
3

 

 
参考资料:http://www.w3school.com.cn/css3/css3_animation.asp
 
 
作业:
1.实现颜色的变化 
@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}
,多种颜色变化  
@keyframes myfirst

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

2.实现颜色和位置的变化
@keyframes myfirst

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}
3.重复
animation-iteration-count 规定动画被播放的次数

animation-iteration-count:1;
-webkit-animation-iteration-count:1; /* Safari 和 Chrome */

设置一个够大的数。

 

简写一个参数

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;
 
animation: myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation: myfirst 5s linear 2s infinite alternate;

/* Safari 和 Chrome: */

-webkit-animation: myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation: myfirst 5s linear 2s infinite alternate;

 

 
 
实际应用:
 
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
@keyframes passdown {
0% {
bottom: 5px;
}
50% {
bottom: 12px;
}
100% {
bottom: 5px;
}
}
@-webkit-keyframes passdown {
0% {
bottom: 5px;
}
50% {
bottom: 12px;
}
100% {
bottom: 5px;
}
}
.one-slide-8 {
opacity: 1;
transition: all 0.1s ease-in 5.1s;
-webkit-transition: all 0.1s ease-in 5.1s;
}
.pub-passdown {
position: absolute;
width: 18px;
height: 16px;
left: 50%;
margin-left: -9px;
bottom: 10px;
/*transition: all 1s ease-in 20s;*/
animation-name: passdown;
animation-timing-function: ease;
animation-duration: 0.8s;
animation-iteration-count: infinite;
/*-webkit-transition: all 1s ease-in 20s;*/
-webkit-animation-name: passdown;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
}
</style>
</head>
<body style="background-color:#000000">
<div class="one-slide-8 pub-passdown">
<img src="http://m.yintai.com/event/actives/luyaninvitation/img/arrow-doubleup.png"/>
</div>
</body>
</html>

你可能感兴趣的:(css)