css动画
2018-08-15 本文已影响0人
YU不忘初心
写到css样式里
transition: all 1s ease-in-out 2s;
变化曲线的值
ease:默认值,先快再快再慢
ease-in:淡入(动画刚开始的时候变化慢)
ease-out:淡出(动画快结束的时候变化慢)
ease-in-out:淡入淡出(开始慢,中间块,结束慢)
linear:线性(匀速变化)
过渡动画当失去触发时机,会恢复到原来的状态
触发过渡动画的时机:
•1,hover(最常用)
关键帧动画
动画效果
animation:name 5s ;
由@keyframes决定
1,@keyframes必须写在css样式里面
2,@keyframes中的动画名要和animation-name的名字一样
@keyframes 动画名{
from{修改的属性值}
to{修改的属性值}
}
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loding</title>
<style type="text/css">
.box{
width:650px;
height:280px;
border:3px solid #000;
margin:50px auto 0;
position:relative;
}
.boxload{
position:absolute;
width:100px;
height:10px;
text-align:center;
line-height:272px;
left:275px;
top:120px;
}
.box1{
width:50px;
height:100px;
background-color: red;
position: absolute;
left:150px;
top:90px;
transform-style:preserve-3d;
/* transition:all 500ms ease ; */
animation:walking 500ms ease 0s infinite;
border-radius: 20px;
alternates;
}
.box2{
width:50px;
height:100px;
background-color: yellow;
position: absolute;
left:250px;
top:90px;
transform-style:preserve-3d;
/* transition:all 500ms ease ; */
animation:walking 500ms ease 100ms infinite;
border-radius: 20px;
alternates;
}
.box3{
width:50px;
height:100px;
background-color: blue;
position: absolute;
left:350px;
top:90px;
transform-style:preserve-3d;
/* transition:all 500ms ease ; */
animation:walking 500ms ease 200ms infinite;
border-radius: 20px;
alternates;
}
.box4{
width:50px;
height:100px;
background-color: green;
position: absolute;
left:450px;
top:90px;
transform-style:preserve-3d;
/* transition:all 500ms ease ; */
animation:walking 500ms ease 300ms infinite;
border-radius: 20px;
alternates;
}
@keyframes walking{
from{
transform:perspective(800px) scaleY(0);
}
to{
transform:perspective(800px) scaleY(2);
}
}
</style>
</head>
<body>
<div class="box">
<div class="boxload">LODING</div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
