div动画特效

最新推荐文章于 2023-11-24 10:31:53 发布

3木子夕H

最新推荐文章于 2023-11-24 10:31:53 发布

阅读量574

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43126568/article/details/106721576

版权

属性描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3

animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 4s 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。如下示1 3
animation-delay 规定动画何时开始。默认是 0。可以为负数，为跳过 3
animation-iteration-count 规定动画被播放的次数。默认是 1。为无限： infinite 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。反流播放：alternate 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。已停止：paused 3
animation-fill-mode 规定对象动画时间之外的状态。如下示2 3

值描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

值描述
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。

动画名：myfirst，全写

div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

@keyframes 创建规则

规定某项 CSS 样式，写法1：注：可以按任一百分比（0%，25%，50%，75%，100%）

@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
100% {background:blue; left:200px; top:200px;}
}

<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>二</title>
<style>
div{
width: 200px;
height: 200px;
position: absolute;
animation: divmove 5s infinite alternate;
}
@keyframes divmove {
0% {background-color: #FF7373;top: 0px;left: 0px;}
25% {
background-color: antiquewhite;top: 0px;left: 200px;
}
50% {
background-color: #007aff;top: 200px;left: 200px;
}
75% {
background-color: #cfcdcd;top: 200px;left: 0px;
}
100%{
background-color: #FF7373;top: 0px;left: 0px;
}
}
</style>

</head>
<body>
<div></div>
</body>
</html>