动画--过渡属性
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
/* -webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;*/
-webkit-transition-property: width; /*过渡*/
transition-property: width;
-webkit-transition-duration:.5s; /*完成过渡所需的时间*/
transition-duration:.5s;
-webkit-transition-timing-function: ease-in; /*慢速开始的过渡*/
transition-timing-function: ease-in;
-webkit-transition-delay: .18s; /*开始出现的延迟时间*/
transition-delay:.18s;
}
div:hover { transition: all .28s ease-in .1s; /*从正方形的效果，慢慢过渡到圆角*/
width: 400px;
}
/*
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间，设置过渡动画的持续时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间，指定一个动画开始执行的时间
/*transition-timing-function包括以下几种函数：
ease 默认值，速度由快到慢，逐渐变慢
linear 恒速
ease-in 渐加效果，加速速度越来越快
ease-out 渐隐效果，减速速度越来越慢
ease-in-out 先加速再减速*/
Keyframes被称为关键帧 以“@keyframes”开头
@keyframes changecolor{ 声明的动画可自己定义
0%{
background: red;
}
40% {
background:orange;
100%{
background: green;
}
}
div{animation-iteration-count:infinite; /*无限循环*/
animation-iteration-count:; /*用来定义动画的播放次数*/
animation-name:move; /*为 @keyframes 动画规定一个名称：*/
animation-direction:alternate; /*设置动画的播放方向*/
animation-play-state:paused; /*页面加载时动画不播放*/
}
设置动画播放方向 animation-direction
其主要有两个值：normal、alternate
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
<div><span></span></div>
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
transform: translateY(90px);
animation-name: move;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: .2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes move {
0%{
transform: translateY(90px);
}
15%{
transform: translate(90px,90px);
}
30%{
transform: translate(180px,90px);
}
45%{
transform: translate(90px,90px);
}
60%{
transform: translate(90px,0);
}
75%{
transform: translate(90px,90px);
}
90%{
transform: translate(90px,180px);
}
100%{
transform: translate(90px,90px);
}
}