@keyframes 规则

要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下：

@keyframes animationName {

    from {

        properties: value;

    }

    percentage {

        properties: value;

    }

    to {

        properties: value;

    }

}

// 或者

@keyframes animationName {

    0% {

        properties: value;

    }

    percentage {

        properties: value;

    }

    100% {

        properties: value;

    }

}

下面我们来看一个简单的 @keyframes 规则示例：

@keyframes ball {

    0% { top: 0px; left: 0px;}

    25% { top: 0px; left: 350px;}

    50% { top: 200px; left: 350px;}

    75% { top: 200px; left: 0px;}

    100% { top: 0px; left: 0px;}

}

 下面就来详细介绍一下上述属性的使用：

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes ball {

            0% { top: 0px; left: 0px;}

            25% { top: 0px; left: 350px;}

            50% { top: 200px; left: 350px;}

            75% { top: 200px; left: 0px;}

            100% { top: 0px; left: 0px;}

        }

        div {

            width: 100px;

            height: 100px;

            border-radius: 50%;

            border: 3px solid black;

            position: relative;

            animation-name: ball;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　

注意：要想让动画成功播放，您还需要定义 animation-duration 属性，否则会因为 animation-duration 属性的默认值为 0，导致动画并不会播放。

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes ball {

            0% { top: 0px; left: 0px;}

            25% { top: 0px; left: 350px;}

            50% { top: 200px; left: 350px;}

            75% { top: 200px; left: 0px;}

            100% { top: 0px; left: 0px;}

        }

        div {

            width: 100px;

            height: 100px;

            border-radius: 50%;

            border: 3px solid black;

            position: relative;

            animation-name: ball;

            animation-duration: 2s;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

提示：动画若想成功播放，必须要定义 animation-name 和 animation-duration 属性。

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes ball {

            0% {left: 0px;}

            50% {left: 350px;}

            100% {left: 0px;}

        }

        div {

            width: 100px;

            height: 100px;

            border-radius: 50%;

            border: 3px solid black;

            text-align: center;

            line-height: 100px;

            position: relative;

            animation-name: ball;

            animation-duration: 2s;

        }

        .one {

            animation-timing-function: ease;

        }

        .two {

            animation-timing-function: ease-in;

        }

        .three {

            animation-timing-function: ease-out;

        }

        .four {

            animation-timing-function: ease-in-out;

        }

    </style>

</head>

<body>

    <div class="one">ease</div>

    <div class="two">ease-in</div>

    <div class="three">ease-out</div>

    <div class="four">ease-in-out</div>

</body>

</html>

　　

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes box {

            0% {transform: rotate(0);}

            50% {transform: rotate(0.5turn);}

            100% {transform: rotate(1turn);}

        }

        div {

            width: 100px;

            height: 100px;

            border-radius: 50%;

            float: left;

            border: 3px solid black;

            text-align: center;

            line-height: 100px;

            position: relative;

            animation-name: box;

            animation-duration: 2s;

            animation-iteration-count: 1;

            animation-fill-mode: forwards;

        }

    </style>

</head>

<body>

    <div>forwards</div>

</body>

</html>

　　

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes ball {

            0% {left: 0px;}

            50% {left: 350px;}

            100% {left: 0px;}

        }

        div {

            width: 100px;

            height: 100px;

            border-radius: 50%;

            border: 3px solid black;

            text-align: center;

            line-height: 100px;

            position: relative;

            animation-name: ball;

            animation-duration: 2s;

        }

        .one {

            animation-delay: 0.5s;

        }

        .two {

            animation-delay: -0.5s;

        }

    </style>

</head>

<body>

    <div class="one">0.5s</div>

    <div class="two">-0.5s</div>

</body>

</html>

　　

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes box {

            0% {transform: rotate(0);}

            50% {transform: rotate(0.5turn);}

            100% {transform: rotate(1turn);}

        }

        div {

            width: 100px;

            height: 100px;

            float: left;

            border: 3px solid black;

            text-align: center;

            line-height: 100px;

            position: relative;

            animation-name: box;

            animation-duration: 2s;

        }

        .one {

            animation-iteration-count: 1;

        }

        .two {

            margin-left: 50px;

            animation-iteration-count: infinite;

        }

    </style>

</head>

<body>

    <div class="one">1</div>

    <div class="two">infinite</div>

</body>

</html>

　　

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes box {

            0% {transform: rotate(0);}

            50% {transform: rotate(0.5turn);}

            100% {transform: rotate(1turn);}

        }

        div {

            width: 100px;

            height: 100px;

            float: left;

            border: 3px solid black;

            text-align: center;

            line-height: 100px;

            position: relative;

            animation-name: box;

            animation-duration: 2s;

            animation-iteration-count: infinite;

        }

        .one {

            animation-direction: reverse;

        }

        .two {

            margin-left: 50px;

            animation-direction: alternate;

        }

    </style>

</head>

<body>

    <div class="one">reverse</div>

    <div class="two">alternate</div>

</body>

</html>

　　

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes box {

            0% {transform: rotate(0);}

            50% {transform: rotate(0.5turn);}

            100% {transform: rotate(1turn);}

        }

        div {

            width: 100px;

            height: 100px;

            float: left;

            border: 3px solid black;

            text-align: center;

            line-height: 100px;

            position: relative;

            animation-name: box;

            animation-duration: 2s;

            animation-iteration-count: infinite;

        }

        .one {

            animation-play-state: running;

        }

        .two {

            margin-left: 50px;

            animation-play-state: paused;

        }

    </style>

</head>

<body>

    <div class="one">running</div>

    <div class="two">paused</div>

</body>

</html>

　　

<!DOCTYPE html>

<html>

<head>

    <style>

        @keyframes box {

            0% {transform: rotate(0);}

            50% {transform: rotate(0.5turn);}

            100% {transform: rotate(1turn);}

        }

        div {

            width: 100px;

            height: 100px;

            border-radius: 50%;

            float: left;

            border: 3px solid black;

            text-align: center;

            line-height: 100px;

            position: relative;

            animation: box 2s linear 0s infinite alternate;

        }

    </style>

</head>

<body>

    <div>animation</div>

</body>

</html>

　　

CSS——动画的更多相关文章

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  3. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  4. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  5. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  6. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  7. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  8. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  9. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  10. Animo.js ：一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

随机推荐

  1. 开始学习web-sql注入

    web内容多且杂,不知道怎么下手开始学,那就先从sql注入开始学吧 目前只在b站上找了一些课程,还有ctfwiki作为参考 链接贴在下面: ctfwiki https://www.bilibili.c ...

  2. Blocks（单调栈）

    题干中说每次选择一个大于k的数,还要选他左右两个数其中之一加上一,最后问你最长的每个数不小于K的子序列. 这些都是障眼法,其实就是问你最长的平均值大于或等于K的最长子序列,这样就明朗了. 接下来就是找 ...

  3. sass 基本常识

    一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...

  4. MVC如何创建区域

    前言 MVC 划分区域可以为项目成立不同的小模块,方便团队之间开发,与增强项目结构的清晰度. 正文 建立区域: 在areas里面建立区域.,然后填写命名. 然后区域注册即可: 但是这样做依然无法解决项 ...

  5. 万节点规模云服务的 SRE 能力建设

    简介: 随着越来越多企业以容器作为系统底座,那么阿里云的云服务又是如何进行SRE规划呢?下文将由资深SRE工程师拆解2 万节点规模云服务背后的 SRE 能力建设,立即点击观看! 作者:宋傲(凡星)   ...

  6. 模型代码联动难? BizWorks来助力

    简介: 本文介绍了业务模型设计和实现保持一致的重要性以及实际落地可能遇到的问题,以及BizWorks如何设计并提供一种双向联动能力, 通过BizWorks Toolkit(IDE 插件) 来解决和优化 ...

  7. 浅谈 Node.js 热更新

    简介: 记得在 15 16 年那会 Node.js 刚起步的时候,我在去前东家的入职面试也被问到了要如何实现 Node.js 服务的热更新. 记得在 15 16 年那会 Node.js 刚起步的时候, ...

  8. 函数计算 GB 镜像秒级启动：下一代软硬件架构协同优化揭秘

    ​简介:本文将介绍借助函数计算下一代 IaaS 底座神龙裸金属和安全容器,进一步降低绝对延迟且能够大幅降低冷启动频率. 作者:修踪 背景 函数计算在 2020 年 8 月创新地提供了容器镜像的函数部署 ...

  9. 使用 Flink Hudi 构建流式数据湖

    ​简介: 本文介绍了 Flink Hudi 通过流计算对原有基于 mini-batch 的增量计算模型的不断优化演进. 本文介绍了 Flink Hudi 通过流计算对原有基于 mini-batch 的 ...

  10. [TP5] 浅谈 ThinkPHP 的 Hook 行为事件及监听执行

    TP5 中使用 \think\Hook::add('xx', '\app\xxx\behavior\Xx') 注册行为. 也可以在 application/tags.php 中统一注册. 在需要监听执 ...