animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列
Posted ningzy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列相关的知识,希望对你有一定的参考价值。
animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列
一个完整的css animations 是由俩部分组成的:
- 定义动画的关键帧(运行方式)
- 该动画的声明
@keyframes
css3 中@keyframes 是用来创建动画的,他可以设置多少帧,每个关键帧表示动画过程的一个状态。
语法格式:
@keyframes animationName{
keyframes-selector{css-styles}
}
- animationsName 表示动画的名称,他将作为唯一标识!
- keyframes-selector{css-styles}是关键帧选择器!即当前关键帧要应用到整个动画过程中位置的一个百分比! from 或者 to! from 代表 0% to 代表100%!
- css-style 定义执行到当前动画帧时,要执行的对应的动画状态!
- 以上三个都是必须的 缺一不可
animation属相
animation 属相描述 动画的 css 声明, 包括指定具体动画以及动画时长等行为!
语法格式
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
属相 | 描述 | ||
---|---|---|---|
animation | 规定@keyframes 动画的名称 | keyframe-name | 规定需要绑定到选择器的 keyfram 的名称 |
none | 规定无动画效果(可用来覆盖级联的动画) | ||
animation-duration | 规定动画完成一个周期所需要花费时间 | time 值 | 以秒或者毫秒计算,默认是0 |
animation-timing-function | 规定动画运动的曲线 | linear | 动画从头到尾速度是相同的 |
ease | 默认值。动画以低速开始,然后加快,在结束之前变慢。 | ||
ease-in | 动画以低速开始 | ||
ease-out | 动画以低速结束 | ||
ease-in-out | 动画以低速开始和结束 | ||
cubic-bezier(n,n,n,n) | 在cubic-bezier 函数中定义自己的值。可能的值是 0 到 1 的数值 | ||
animation-delay | 规定动画开始时的延迟, 可选 | time 值 | 以秒或者毫秒计算,默认是0 |
animation-iteration-count | 规定动画被播放的次数 | n | 定义动画被播放的次数,默认是 1 |
infinite | 规定动画无限次循环 | ||
animation-direction | 规定动画是否在下个周期,逆向播放 | normal | 默认值,动画默认播放 |
alternate | 动画会轮流反向播放 | ||
animation-play-state | 规定动画是否正在运行,或者暂停 | running | 默认值,规定动画正在播放 |
paused | 规定动画已暂停 | ||
animation-fill-mode | 规定对象动画时间之外的状态 | none | 不改变默认行为 |
forwards | 当动画完成后,保持最后一个属相值(在最后一个关键帧中定义) | ||
backwards | 在animation-delay所指定的一段时间内,在动画显示之前,应用开始属相(在第一个关键帧中定义) | ||
both | 向前和向后填充模式都被应用 |
简单案列
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css 动画</title>
<style>
body{
margin: 0;
padding: 0;
background-color:#f7f7f7;
}
.box{
width: 400px;
margin:100px auto;
animation: rotate 4s linear infinite;
}
img{
display: block;
}
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to{
transform: rotateZ(-360deg);
}
}
</style>
</head>
<body>
<div class="box">
<img src="./images/fengche.png" >
</div>
</body>
</html>
以上是关于animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列的主要内容,如果未能解决你的问题,请参考以下文章