CSS3--动画篇(animation)
来源:互联网 发布:js href blank 编辑:程序博客网 时间:2024/06/06 21:00
1.属性:animation-name:检索或设置对象所应用的动画名称
语法:animation-name:keyframename/none;
(keyframename:指定要绑定到选择器关键帧的名称;
none:指定没有动画【可用于覆盖从级联的动画】)
2.属性:animation-duration:检索或设置对象动画的持续时间
语法:animation-duration:time;
(默认值为0,表示无动画效果)
3.属性:animation-timing-function:检索或设置对象动画的过渡类型
语法:animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out/step-start/step-end等;
(linear:线性过渡;
ease:平滑过渡;
ease-in:由慢到快;
ease-out:由快到慢;
ease-in-out:由慢到快再到慢;
step-start:相当于steps(1,start);
step-end:相当于steps(1,end); )
4.属性:animation-delay:检索或设置对象动画的延迟时间
语法:animation-delay:time;
(定义动画开始前等待的时间【默认为0】)
5.属性:animation-iteration-count:检索或设置对象动画的循环次数
语法:animation-iteration-count:infinite/<number>;
(infinite:无限次数循环;
<number>:为数字,默认值为“1”)
6.属性:animation-direction:在循环中是否反向运动
语法:animation-direction:normal/reverse/alternate/alternate-reverse/initial/inherit;
(normal:正常方向;
reverse:反方向运行;
alternate:先正常再反向,持续交替运行;
alternate-reverse:先反向再正常,持续交替运行)
7.属性:animation-fill-mode:规定当动画不播放时,要应用到元素的样式
语法:animation-fill-mode:none/forwards/backwards/both/initial/inherit;
(none:默认值【不设置】;
forwards:设置对象默认状态为动画结束时的状态;
backwards:设置对象默认状态为动画开始时的状态;
both:设置对象默认状态为动画结束或开始时的状态)
8.属性:animation-play-state:指定动画是否正在运行或已暂停
语法:animation-play-state:paused/running;
(paused:指定暂停动画;
running:默认,指定正在运行的动画;)
9.属性:will-change:提前通知浏览器将要做什么动画,让浏览器提前准备合适的优化设置
语法:will-change:auto/scroll-position/contents/<custom-ident>/<animateable-feature>;
(auto:无特定意图;
scroll-position:表示将要改变元素的滚动位置;
contents:表示将要改变元素的内容;
<custom-ident>:明确指定将要改变的属性与给定的名称;
<animateable-feature>:可动画的一些特征值,比如left/top/margin等)
- CSS3--动画篇(animation)
- CSS3 animation(动画) 属性
- CSS3 animation(CSS3 帧动画)
- 【css3】CSS3动画(animation @keyframes)
- css3动画属性--animation(动画)
- css3动画属性--animation(动画)
- css3动画属性--animation(动画)
- CSS3 动画效果专辑(animation)
- CSS3 -webkit-animation(动画)
- CSS3 动画之animation
- CSS3之动画Animation
- css3的animation 动画
- css3 animation动画事件
- webkit-animation css3 动画
- CSS3动画 Animation
- css3 animation 动画应用
- CSS3----动画animation
- css3-animation动画
- LUA简明教程
- 约束
- VS GB2312 UTF-8 编码
- Linux下配置Oracle调用接口OCI及我碰到的一些问题
- js一些常用的校验(工作中用的较多的,并附常用正则表达式)
- CSS3--动画篇(animation)
- Cannot find config.m4. Make sure that you run '/usr/bin/phpize' in the top level source directory
- Java 枚举用法详解
- 基于Netty的文件上传下载、心跳检测、在线聊天的demo
- OPNET网络仿真分析-1.1.3、OPNET Modeler
- delphi动态获取点击的MenuItem
- Tensorflow之TF-Slim
- 变量的生命周期
- IntelliJ IDEA + Spring Boot + Mybatis的整合