欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-24 20:21:22
...

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" alt="">
    </div>
</body>
</html>