animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列

时间 2019-12-09

标签 animation 属相详解 keyframes 用法繁體版

原文原文链接

animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列

一个完整的css animations 是由俩部分组成的：css

定义动画的关键帧（运行方式）
该动画的声明

@keyframes

css3 中@keyframes 是用来建立动画的，他能够设置多少帧，每一个关键帧表示动画过程的一个状态。html

语法格式：css3

@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 的名称
animation	规定@keyframes 动画的名称	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
animation-iteration-count	规定动画被播放的次数	infinite	规定动画无限次循环
animation-direction	规定动画是否在下个周期，逆向播放	normal	默认值，动画默认播放
animation-direction	规定动画是否在下个周期，逆向播放	alternate	动画会轮流反向播放
animation-play-state	规定动画是否正在运行，或者暂停	running	默认值，规定动画正在播放
animation-play-state	规定动画是否正在运行，或者暂停	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" alt="">
    </div>
</body>
</html>