CSS animation属性
定义和用法
animation属性是下列属性的一个缩写属性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
注意：始终指定animation-duration属性，否则持续时间为0，永远不会播放。
表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。
| 属性 | Internet Explorer | Chrome | FireFox | Safari | Opera |
|---|---|---|---|---|---|
| 属性名称 | IE | 谷歌 | 火狐 | Safari | Opera |
| animation | 10.0 | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
属性值
| 属性值 | 描述 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 指定动画完成所需的秒数或毫秒数 |
| animation-timing-function | 指定动画的速度曲线 |
| animation-delay | 指定动画开始之前的延迟 |
| animation-iteration-count | 指定应播放动画的次数 |
| animation-direction | 指定动画是否应在交替循环中反向播放 |
| animation-fill-mode | 指定动画在执行之外应用的值 |
| animation-play-state | 指定动画是运行还是暂停 |
HTML颜色名称
所有浏览器支持的颜色名称，所有现代浏览器都支持以下140种颜色名称（单击颜色名称或十六进制值，以将颜色视为背景颜色以及不同的文本颜色）：
有关HTML颜色的完整概述，请访问我们的颜色教程。
CSS animation属性的更多相关文章
- CSS animation 属性
定义和用法 animation属性是下列属性的一个缩写属性: animation-name animation-duration animation-timing-function animation ...
- js监听指定元素的css动画属性
MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- animation属性
文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...
- CSS魔法堂：更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
随机推荐
- qt 使用OpenCV
使用MinGW编译OpenCV源码 下载OpenCV源码.CMake编译工具 编译安装完: Qt工程配置 INCLUDEPATH += D:/qt_work/opencv/build/install/ ...
- 重温《NoSQL精粹》
前言 在网上有关Redis相关文章满天飞的时候,它是什么,用于解决什么问题,有哪些相类似的技术,与传统的关系型数据库有哪些差别,什么时候使用?这个时候我决定重温一下<NoSQL精粹>. 也 ...
- MySQL数据库无法使用+号连接字符串的处理方法
转自:http://www.maomao365.com/?p=10003 摘要: 下文讲述MySQL数据库,字符串连接的方法分享,如下所示:实现思路: 使用concat函数对两个字符串进行连接在MyS ...
- win7个性化不能换界面:此页面上的一个或多个设置已被系统管理员禁用,关机里的切换用户和锁定为灰色
win7个性化不能换界面:此页面上的一个或多个设置已被系统管理员禁用,关机里的切换用户和锁定为灰色 找到注册表 cmd-regedit HKEY_CURRENT_USER\Software\Micro ...
- 在python的虚拟环境venv中使用gunicorn
昨天遇到的问题,一个服务器上有好几个虚拟机环境. 我active进一个虚拟环境,安装了新的三方库之后, 使用gunicorn启动django服务, 但还是死活提示没有安装这个三方库. 一开始没有找到原 ...
- 工具资源系列之给 windows 装个 vmware 虚拟机
如果长时间处于同一种环境,慢慢得我们会觉得有些无聊,所以适当地出去走走看看外面的世界能带给我们不一样的体验. 所以,何不出去走走,看看另一个世界? 然而,平时需要工作很难抽身无所顾忌地潇洒走开,这是不 ...
- 【2019.7.20 NOIP模拟赛 T1】A（A）（暴搜）
打表+暴搜 这道题目,显然是需要打表的,不过打表的方式可以有很多. 我是打了两个表,分别表示每个数字所需的火柴棒根数以及从一个数字到另一个数字,除了需要去除或加入的火柴棒外,至少需要几根火柴棒. 然后 ...
- Luogu P5022 旅行
开始写复赛题了 先放张图纪念我惨烈的卡常之路 不说了,简直悲伤 题目链接 思路么..不想写了 Code //不要在意四十行超级加速,卡常用的 #include<bits/stdc++.h> ...
- idea安装破解一条龙
1.官网下载2018.2月版本.(other version->选中2018.2) 2.下载JetbrainsCrack_jb51.rar http://wangshuo.jb51.net:81 ...
- LCT好题总结
写在前面: 初探多项式之后,开始了数据结构之旅,可持久化数据结构的总结大概是咕了,只总结一些$LCT$的题 T1:水管局长数据加强版 发现题中只有删边操作,而我们只会做加边,所有考虑时光倒流 先在最后 ...