<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画的使用</title>
<style>
/* @keyframes move { */
/* from { */
/* transform: translate(0, 0); */
/* } */
/* to { */
/* transform: translate(1000px, 0); */
/* } */
/* } */
/* */
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
animation-name: move;
animation-duration: 5s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!-- tips -->
<!-- 1.0%是动画的开始,100是动画的完成,这样的规则就是动画序列 -->
<!-- 2.在@keyframes中规定某项CSS样式,就能创建有当前样式逐渐改为新样式的动画效果 -->
<!-- 3.动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式,任意多的次数 -->
<!-- 4.请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100% -->
CSS3_动画的使用
猜你喜欢
转载自blog.csdn.net/weixin_44079801/article/details/106968214
今日推荐
周排行