作为前端刚入门的小菜鸟,只想记录一下每天的小收获
对于animation动画
1.实现动画效果的组成:
(1)通过类似Flash的关键帧来声明一个动画
(2)在animation属性中调用关键帧声明的动画
2.animation是一个复合属性包括很多的子属性:
animation-name:用来指定一个关键帧动画的名称,这个动画名必须对应一个@keyframes 规则。CSS 加载时会应用animation-name 指定的动画,从而执行动画。
animation-duration 用来设置动画播放所需的时间
animation-timing-function 用来设置动画的播放方式,有一些值如下:
速度由快到慢,然后逐渐变慢:ease
速度越来越快,呈现加速状态:ease-in;
速度越来越慢,呈现一种减速状态:ease-out
先加速,在减速:ease-in-out
匀速状态:linear
自定义(三段赛贝尔曲线);cubic-bezier
animation-delay 用来指定动画的延迟时间(一直循环的值:infinite)
animation-iteration-count 用来指定动画播放的循环次数
animation-direction 用来指定动画的播放方向(逆向:alternate)
animation-play-state 用来控制动画的播放状态(停止:paused)
animation-fill-mode 用来设置动画的时间外属性
动画结束后不返回:forwards
动画结束后迅速返回:backforwards
根据情况产生前两个效果:base
默认:normal;
简写形式:animation: myani 1s ease 2 alternate 0s both;
3.为了兼容旧版本,需要加上相应的浏览器前缀,版本信息如下表:
Opera Firefox Chrome Safari IE
支持需带前缀15 ~ 29 5 ~ 15 4 ~ 42 4 ~ 8 无
支持不带前缀无16+ 43+ 无10.0+
//兼容完整版,Opera 在这个属性上加入webkit,所以没有-o-
-webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both;
transition: all 1s ease 0s;
//@keyframes 也需要加上前缀
@-webkit-keyframes myani {...}
@-moz-keyframes myani {...}
@-o-keyframes myani {...}
@-ms-keyframes myani {...}
keyframes myani {...}
<下面的例子没有加上兼容性>
1.幻灯片式轮播图
<!--这里的幻灯片式是以插入图片来写的,也可以写成背景图片轮播,代码会更简洁一点-->
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
*{margin:0;padding:0;} #container{
width:100%;
height:100px;
position:relative;
overflow:hidden;
} #container>:not(:first-child){
opacity:0;
} #container>:first-child{
width:300px;
height:100px;
position:absolute;
font-weight:bold;">mediumpurple;
animation-name:shuf1;
animation-duration:20s; /*动画执行时间*/
animation-timing-function:ease-in-out; /*动画执行方法:匀速*/
animation-iteration-count:infinite; /*动画执行次数*/
} #container>:nth-child(2){
width:300px;
height:100px;
position:absolute;
font-weight:bold;">palegreen;
animation-name:shuf2;
animation-duration:20s; /*动画执行时间*/
animation-timing-function:ease-in-out; /*动画执行方法:匀速*/
animation-iteration-count:infinite; /*动画执行次数*/
} #container>:nth-child(3){
width:300px;
height:100px;
poaition:absolute;
font-weight:bold;">pink;
animation-name:shuf3;
animation-duration:20s; /*动画执行时间*/
animation-timing-function:ease-in-out; /*动画执行方法:匀速*/
animation-iteration-count:infinite; /*动画执行次数*/
} #container>:nth-child(4){
width:300px;
height:100px;
poaition:absolute;
font-weight:bold;">lightskyblue;
animation-name:shuf4;
animation-duration:20s; /*动画执行时间*/
animation-timing-function:ease-in-out; /*动画执行方法:匀速*/
animation-iteration-count:infinite; /*动画执行次数*/
} #container>:nth-child(3){
width:300px;
height:100px;
poaition:absolute;
font-weight:bold;">yellowgreen;
animation-name:shuf5;
animation-duration:20s; /*动画执行时间*/
animation-timing-function:ease-in-out; /*动画执行方法:匀速*/
animation-iteration-count:infinite; /*动画执行次数*/
} #container>:nth-child(6){
width:300px;
height:100px;
poaition:absolute;
font-weight:bold;">darkgrey;
animation-name:shuf6;
animation-duration:20s; /*动画执行时间*/
animation-timing-function:ease-in-out; /*动画执行方法:匀速*/
animation-iteration-count:infinite; /*动画执行次数*/
} @keyframes shuf1 {
0% {opacity: 1;}
14%,28%,42%,56%,72%,86%,100%{opacity:0.5}
} @keyframes shuf2 {
0%,14% {opacity:0 ;}
28%{opacity:1;}
42%,56%,72%,86% ,100%{opacity:0;}
} @keyframes shuf3 {
0%,14% ,28%{opacity: 0;}
42% {opacity:1;}
56%,72%,86% ,100%{opacity:0;}
} @keyframes shuf4 {
0%,14% ,28%,42% {opacity: 0;}
56% {opacity:1;}
72%,86% ,100%{opacity:0;}
} @keyframes shuf5 {
0%,14% ,28%,42%,56% {opacity: 0;}
72% {opacity:1;}
86% ,100%{opacity:0;}
} @keyframes shuf6 {
0%,14% ,28%,42%,56%,72% {opacity: 0;}
86% {opacity:1; }
100%{opacity:0;}
}
2.水平轮播图
html代码处
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="case2.css">
</head>
<body>
<div id="main">
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
css样式
*{margin:0;padding:0;} #main{
width:1000px;
height:200px;
margin:0 auto;
border:1px solid black;
position:relative;
overflow:hidden;
} #container{
width:3000px;
height:200px;
border:1px solid black;
position:absolute;
top:0;
animation-name:a1;
animation-duration:30s;/*设置动画播放的时间*/
animation-timing-function:linear; /*设置动画的缓动状态*/
animation-iteration-count:infinite; /*设置动画的循环次数*/
animation-direction:alternate; /* 设置动画逆向运动*/
}
#container>div{
width:1000px;
height:200px;
float:left; } #container>:first-child{
font-weight:bold;">#65B053;
} #container>:nth-child(2){
font-weight:bold;">#59B7DF;
} #container>:nth-child(3){
font-weight:bold;">#E8E25D;
} @keyframes a1{
0%{margin-left:0;}
45%,50%{margin-left:-1000px;}/*设置每张图片的停留时间*/
95%,100%{margin-left:-2000px;}
}