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来实现呢?答案就是 ...
随机推荐
- js监听屏幕方向如何第一次默认不监听
this.supportOrientation = typeof window.orientation === 'number'; // 检查屏幕方向 checkScreenOrientation() ...
- zip unzip 压缩解压缩命令
直接上例子: mkdir test1 touch test1/1.txt touch test1/2.txt zip -r test1.zip test1 #-r 参数是包含文件夹下的文件 un ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- day75_10_22频率认证和jwt
一.频率认证原理. 1.从dispatch中获取配置,找到setting中的配置. 2.从thtoyyling中寻找到各个认证类. 3.所有认证类都继承自basethrottle,basethrott ...
- C++ class内的=重载,拷贝赋值函数copy op=,重载示例。必须是class内
#include <iostream> // overloading "operator = " inside class // = 是一元操作符.不写,编译器会提供 ...
- C++ trais技术 模板特化的应用
// traits 的应用 /////////////////////////////////////////// // traits template <typename T> clas ...
- Codeforces Round #597 (Div. 2) D. Shichikuji and Power Grid 最小生成树
D. Shichikuji and Power Grid</centerD.> Shichikuji is the new resident deity of the South Blac ...
- Paper | Recovering Realistic Texture in Image Super-resolution by Deep Spatial Feature Transform
目录 故事背景 空域特征转换 超分辨率网络 发表在2018年CVPR. 摘要 Despite that convolutional neural networks (CNN) have recentl ...
- 【12月13日】A股ROE最高排名
个股滚动ROE = 最近4个季度的归母净利润 / ((期初归母净资产 + 期末归母净资产) / 2). 查看更多个股ROE最高排名 中公教育(SZ002607) - ROE_TTM:92.66% - ...
- 03Shell条件测试
条件测试 Shell 条件测试 格式 1: test 条件表达式 格式 2: [ 条件表达式 ] 格式 3: [[ 条件表达式 ]] 具体参数说明可以通过 man test 进行查看 文件测试 [ 操 ...