一、transition
1、先看效果
渐变动画.gif
2、transition其实就是一个过渡效果，例如 transition: opacity 1s ease-in-out,transform 1s ease-in-out 0.1s; 其实对应的就是透明度、动画时间、动作效果（ease-in-out就是规定以慢速开始和结束的过渡效果，而 ease就是规定慢速开始，然后变快，然后慢速结束的过渡效果，而linear就是相同的速度没有加速度了），然后后面通过逗号隔开的是另一个效果transform,这时候发现transform动画最后还多了一个参数0.1s，这是说明延迟0.1s后执行，也就是说执行opacity0.1s后再执行transform
如果没有transform动画的话，效果就如同蓝色的原块突然的出现在在红色块内
3、代码
<div class="test_back">
<div class="test_inline">
</div>
</div>
.test_back{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
}
.test_back:hover div{
opacity: 1;
-webkit-transform:translate(0px, 0px);
/* transition 其实就是过渡 先 opacity ，0.1s后是transform*/
transition: opacity 1s ease-in-out,transform 1s ease-in-out 0.1s;
}
.test_inline{
height: 80px;
width: 80px;
background-color: blue;
border-radius: 100%;
opacity: 0;
transition: opacity 1s ease-in-out,transform 1s ease-in-out;
-webkit-transform:translate(-50px, -50px);
}
二、transform
1、先看效果
旋转.gif
2、上面的效果好像做的不是很好看，无所谓啦，先看这里我们用到了transform,使用transform，我们会用到它的一些属性，例如translate 位置变换、rotate 做旋转、scale 可以缩放、skew 操作变形、matrix 变幻矩阵.
下面代码中我们用到的transform-origin是变形原点，也就是变形或旋转所围绕的点，然后我们利用roate根据原点进行角度的旋转。
3、代码
<div class="test_back">
<"img class="test_block" src="../../image/111.jpeg" width="150" height="100">
<"img class="test_block" src="../../image/111.jpeg" width="150" height="100">
<"img class="test_block" src="../../image/111.jpeg" width="150" height="100">
</div>
.test_back{
width: 200px;
height: 200px;
text-align: center;
}
.test_block{
position: absolute;
transform-origin: center 400px;
transition: transform .2s ease;
}
.test_back .test_block:first-child{
transform: rotate(5deg);
}
.test_back .test_block:last-child{
transform: rotate(-5deg);
}
.test_back:hover .test_block:first-child{
transform: rotate(10deg);
}
.test_back:hover .test_block:last-child{
transform: rotate(-10deg);
}
三、animation
1、先看效果
放大.gif
2、animation 属性我们主要是用来做动画效果，基本的写法就是 animation: （绑定到keyframes的名称ID） （动画时长，要大于0） （动画的速度曲线，就是上面所说的linear、ease等） （动画开始之前延迟的时间） （动画持续的次数，例如infinite就是永久） （normal正向播放，alternate反向播放）;
3、看代码
<div class="test_animation">
</div>
.test_animation{
width: 50px;
height: 50px;
border-radius: 100%;
background-color: yellow;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
/*infinite 是永久，也可以定义次数，具体执行的动画由keyframes 决定*/
-webkit-animation:fadeout 1.0s infinite ease-in-out;
animation: fadeout 1.0s infinite ease-in-out;
}
@webkit-keyframes fadeout{
from {-webkit-transform:scale(0.0);}
to {-webkit-transform:scale(1.0);opacity: 0;}
}
@keyframes fadeout{
from {transform: scale(0.0);}
to {transform: scale(1.0);opacity: 0;}
}
四、animation巧用border
1、先看效果
转圈.gif
2、 使用linear 才会比较顺畅，如果是ease每一圈会停顿这是因为ease的速度是控制低速开始，然后加速，然后在结束的时候减速
3、代码
<div class="test_animation">
</div>
.test_animation{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid gray;
border-left-color: WhiteSmoke;
border-left-radius: 100%;
/* border颜色使用linear 才会比较顺畅，如果是ease每一圈会停顿 */
-webkit-animation:load 1.1s infinite linear;
}
@webkit-keyframes load{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@keyframes load{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
五、animation巧用延时delay
1、先看效果
跳动.gif
2、animation-delay 定义动画何时开始, 默认0 为立即开始,正值为 延时指定时间后执行动画,负值为 立即执行，但是会跳过指定时间后进入动画.
3、
<div class="test_animation">
<div class="test_line1"></div>
<div class="test_line2"></div>
<div class="test_line3"></div>
<div class="test_line4"></div>
<div class="test_line5"></div>
</div>
.test_animation{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:translate(-50%, -50%);
width: 50px;
height: 50px;
text-align: center;
}
.test_animation > div{
width: 6px;
height: 100%;
display: inline-block;
background-color: red;
-webkit-animation: strechdelay 1.2s infinite ease-in-out;
}
/*****************长短逐渐变换的效果，去掉则变成同调************************/
.test_animation .test_line2{
-webkit-animation-delay: -1.1s;
}
.test_animation .test_line3{
-webkit-animation-delay: -1.0s;
}
.test_animation .test_line4{
-webkit-animation-delay: -0.9s;
}
.test_animation .test_line5{
-webkit-animation-delay: -0.8s;
}
/*****************长短逐渐变换的效果，去掉则变成同调************************/
@-webkit-keyframes strechdelay{
0%,40%,100%{
-webkit-transform:scaleY(.4);
}
20%{
-webkit-transform:scaleY(1.0);
}
}
网友评论