调用动画效果用animation,定义动画用keyframes
动画效果与过度效果的区别:
animation-name:规定需要绑定到选择器的keyframe名称。
animation-duration: 规定完成动画效果所花费的时间,以秒豪秒计。
animation-timing-function:规定动画的速度曲线
animation-delay:规定在动画开始之前的延迟
animation-iteration-count:规定动画应该插播的次数
@keyframes anim {0%{transform:translate(0px,0px)
}}
100%{
transform:translate(900px,100px)
}
方块旋转动画案例:
animation: anim 2s linear 1s infinite 一直循环;
animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次(如果要一直循环infinite)
<style>
/* 用keyframe定义一个动画 */
@keyframes anim{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.box{
width: 100px;
height: 100px;
background-color: red;
margin:100px auto;
/* animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次(如果要一直循环infinite) */
animation: anim 2s linear 1s infinite;
}
</style>
</head>
<body>
<div class="box">hello</div>
</body>
</html>
案例:可以根据%从0-100之间进行设置对应的变化内容,如宽,高,背景色,等,其中要注意一个点就是开始0%的宽高度要与结束的100%宽高度一致,这样视觉会比较平滑,好看。
❤❤❤❤
<style>
/* 用keyframe定义一个动画 */
@keyframes anim{
0%{
transform: rotate(0deg);
}
20%{
width: 200px;
height: 200px;
transform: rotate(360deg);
}
40%{
background-color: yellow;
width: 300px;
height: 300px;
}
100%{
width: 100px;
height: 100px;
}
}
.box{
width: 100px;
height: 100px;
background-color: red;
margin:100px auto;
/* animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次(如果要一直循环infinite) */
animation: anim 10s linear;
}
</style>
</head>
<body>
<div class="box">hello</div>
</body>
</html>
=======================================================================
keyframes
1,按百分比指定动画
2,from.....to.....指定动画 也就是相当于0%-100%
注意:开始与结束相同,可以让动画更平滑。
<style> /* 用keyframe定义一个动画 */ @keyframes anim{ /* 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } */ /* 可写成以下 */ form{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .box{ width: 100px; height: 100px; background-color: red; margin:100px auto; /* animation:动画名+多少秒完成+linear过度匀速+多少秒+旋转2次(如果要一直循环infinite) */ animation: anim 2s linear ; } </style> </head> <body> <div class="box">hello</div> </body> </html>
CD旋转效果:
停止动画效果
animation-play-state:paused;
<style>
/* CD旋转效果 */
@keyframes anim {
form{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.box{
height: 200px;
width: 200px;
margin: 100px auto;
border-radius: 50%;
overflow: hidden;
animation: anim 3s linear infinite;
}
.box img{
height: 200px;
width: 200px;
}
.box:hover{
animation-play-state:paused;
}
</style>
</head>
<body>
<audio src="" controls></audio>
<div class="box">
<img src="ppp.jpg" alt="">
</div>
</body>
</html>
海盗床效果案例:
1,完成波浪效果
2,完成船摆动的效果
3,添加鱼的效果