keyframes
用 keyframes定义动画,写上动画要执行的内容, (类似类选择器)
@keyframes a {
0% {
width: 300px;
}
100% {
width: 600px;
}
}
这就是定义了一个动画变量名,从0%到100%也就是从开始到结束,也可以用from,to来表示,
@keyframes a {
from {
width: 300px;
}
to {
width: 600px;
}
}
里面写属性变化的值,不止可以分两个段也可以进行多段分割
@keyframes a {
0% {
width: 300px;
}
50% {
width: 800px;
}
100% {
width: 300px;
}
}
,用百分数进行分割。
动画相关的值
@keyframes 规定动画
animation-name 规定 @keyframes 动画的名称(必须的)
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是 0(必须的)
animation-timingfunction 规定动画的速度曲线,默认是“ease”
animation-delay 规定动画何时开始,默认是 0
animation-iteration-count 规定动画被播放的次数,默认是 1,还有 infinite
animation-direction 规定动画是否在下一周期逆向播放,默认是 "normal", alternate 逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"
animation 所有动画属性的简写属性,除了animation-play-state 属性
animation-name与 animation-duration
<style>
@keyframes a {
0% {
width: 300px;
}
50% {
width: 800px;
}
100% {
width: 300px;
}
}
div {
animation-name: a;
animation-duration: 2s;
}
</style>
<script>
</script>
</head>
<body>
<div style='background-Color:red;width: 300px;height:300px ;'></div>
</body>
animation-timing-function 与animation-delay
linear:
动画从头到尾的速度是相同的。
ease:
默认。动画以低速开始,然后加快,在结束前变慢。
ease-in:
动画以低速开始。
ease-out:
动画以低速结束。
ease-in-out:
动画以低速开始和结束。
cubic-bezier(n,n,n,n):
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
@keyframes a {
0% {
width: 300px;
}
50% {
width: 800px;
}
100% {
width: 300px;
}
}
div {
animation-name: a;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
}
animation-timing-function 动画开始和结束慢速
animation-delay 动画延迟两秒开始。
animation-iteration-count 与 animation-play-state
@keyframes a {
0% {
width: 300px;
}
50% {
width: 800px;
}
100% {
width: 300px;
}
}
div {
animation-name: a;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
}
div:hover {
animation-play-state: paused;
}
animation-iteration-count 循环次数,infinite重复循环
animation-play-state paused 停止动画 当鼠标移入动画停止
animation-direction 与 animation-fill-mode
animation-direction
normal默认值。动画按正常播放。
reverse动画反向播放。
alternate动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
alternate-reverse动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
initial设置该属性为它的默认值。请参阅 initial。
inherit从父元素继承该属性。请参阅 inherit。
@keyframes a {
0% {
width: 300px;
}
50% {
width: 500px;
}
100% {
width: 800px;
}
}
div {
animation-name: a;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
/* animation-fill-mode: forwards; */
animation-direction: alternate;
}
div:hover {
animation-play-state: paused;
}
animation-iteration-count:infinite 重复循环 animation-direction:alternate 在偶数次反向播放
就形成了 长度 一直来回变化的效果
animation-fill-mode
保持 最终状态 forwards 原位置 backwards
@keyframes a {
0% {
width: 300px;
}
50% {
width: 500px;
}
100% {
width: 800px;
}
}
div {
animation-name: a;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-fill-mode: forwards;
}
div:hover {
animation-play-state: paused;
}
animation-fill-mode: forwards 宽度到达800后 停止动画 保持在动画执行完毕的状态 不会恢复
animation
直接写出所有的相关动画属性(简写),除了animation-play-state 属性。
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。
@keyframes a {
0% {
width: 300px;
}
50% {
width: 500px;
}
100% {
width: 800px;
}
}
div {
animation: a 5s ease-in-out 2s infinite alternate;
}
div:hover {
animation-play-state: paused;
}