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

Posted ningzy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列相关的知识,希望对你有一定的参考价值。

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

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

  1. 定义动画的关键帧(运行方式)
  2. 该动画的声明

@keyframes

css3 中@keyframes 是用来创建动画的,他可以设置多少帧,每个关键帧表示动画过程的一个状态。

语法格式:

    @keyframes animationName{
        keyframes-selector{css-styles}
    }
  1. animationsName 表示动画的名称,他将作为唯一标识!
  2. keyframes-selector{css-styles}是关键帧选择器!即当前关键帧要应用到整个动画过程中位置的一个百分比! from 或者 to! from 代表 0% to 代表100%!
  3. css-style 定义执行到当前动画帧时,要执行的对应的动画状态!
  4. 以上三个都是必须的 缺一不可

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 案列的主要内容,如果未能解决你的问题,请参考以下文章

跟随我在oracle学习php(14)

(生产)create-keyframe-animation -动画实现

CSS3@keyframes规则和animation动画

动画animation @keyframes

animation动画

scss sass_keyframe-animation.scss