CSS3(animation, trasfrom)总结
CSS3(animation, trasfrom)总结
1. Animation
样式写法:
格式: @-浏览器内核-keyframes 样式名 {}
标准写法(chrome safari不支持
@keyframes [样式名] {
0% {left: 10px ; top : 20px;}
50% {left: 20px ; top : 30px;}
100% {left: 10px ; top : 20px;}
};
Firefox
@-mz-keyframes [样式名] {
0% {left: 10px ; top : 20px;}
50% {left: 20px ; top : 30px;}
100% {left: 10px ; top : 20px;}
};
Chrome & Safari
@-webkit-keyframes [样式名] {
0% {left: 10px ; top : 20px;}
50% {left: 20px ; top : 30px;}
100% {left: 10px ; top : 20px;}
};
Opern
@-o-keyframes [样式名] {
0% {left: 10px ; top : 20px;}
50% {left: 20px ; top : 30px;}
100% {left: 10px ; top : 20px;}
};
或者是
@keyframes [样式名] {
from {left:0px; top:10px;}
to {left:20px; top: 50px;}
}
样式引用:
Style=”animation:样式名 时间 播放曲线”
eg:
样式:
@-webkit-keyframes testRule {
20% {left:100px; top:50px;}
40% {left:50px; top: 100;}
60% {left:50px; top: 50;}
80% {left:100px; top: 0;}
100% {left:0px; top:0px;}
}
元素:
<div style=”position:absolute;width:100px; height:100px; -webkit-animation: testRule 5s linear”> </div>
说明:
0s- 1s DIV从最开始位置 到 {left:100px; top:50px;}
1s -2s {left:100px; top:50px;} 到 {left:50px; top: 100;}
2s -3s {left:50px; top: 100;} 到 {left:50px; top: 50;}
3s - 4s {left:50px; top: 50;} 到 {left:100px; top: 0;}
4s - 5s {left:100px; top: 0;} 到 {left:0px; top:0px;}
CSS3 Animation 所具有的属性:
@keyframes 所有规定动画
Aniamtion: 所有规定动画简写属性, 除了animation-play-state 属性
Animation-name 规定@keyframes 动画的名称
Animation-duration 规定动画完成一个周期所花费的秒或毫秒. 默认是 0
Animation-timing-function:规定动画的速度曲线.默认是 0
Aniamtion-delay 规定动画从什么时候开始 默认是0
Aniamtion-iteration-count 规定动画播放几遍 默认是1
Animation-direction 规定动画是否在下一周期逆向地播放. 默认是 ” normal”
Animation-play-state :规定动画的当前状态 “paused” or “running” .默认是 ”running”
Animation-fill-mode :规定对象动画时间之外的状态
ps:Animation-play-state : 当在移动端使用时, 如果样式中存在trasfrom 则会不起作用(原因未知)
CSS3属性 对应 dom对象属性
Aniamtion |
Dom.style.webkitAnimation(根据浏览器内核而定) |
Dom.style.animation |
|
Animation-name |
Dom.style.webkitAnimationName |
Animation-duration |
Dom.style.webkitAnimationDuration |
Animation-timing-function: |
Dom.style.webkitAnimationTimingFunction |
Aniamtion-delay |
Dom.style.webkitAnimationDelay |
Aniamtion-iteration-count |
Dom.style.webkitAnimationIterationCount |
Animation-direction |
Dom.style.webkitAnimationDirection |
Animation-play-state |
Dom.style.webkitAnimationPlayState |
Animation-fill-mode |
Dom.style.webkitAnimationFillMode |
样式动态生成动态引入
styleSheets
chorome中
document.styleSheets //获取所有的样式链表文件内容
var sst = document.styleSheets[0] //获取第0个样式链表
var str = “@keyframes name {0% {left:20px; } 100%{left:60px;}}”;
//将样式str 插入到 第0 个位置的样式文件中
sst.insertRule(str)
//获取第0 个样式文件中第0个样式对象
sst.cssRules[0]
控制Animation播放时间
Dom.style.webkitAnimationDelay = “-” + time + "s";
dom.display = "none";
dom.offsetHeight = "";
dom.display = "block";
2 transform
http://www.w3school.com.cn/cssref/pr_transform.asp
转载于:https://www.cnblogs.com/lionsblog/p/4537669.html
CSS3(animation, trasfrom)总结相关推荐
- 用html怎么制作风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- CSS3 (animation)
CSS3 animation 动画 实例代码: 属性取值说明: animation: animation-name animation-duration animation-timing-functi ...
- html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- javascript实战pdf_web前端入门到实战:10分钟入门 CSS3 Animation
Animation可以让你不用依赖javascript或jquery,用纯CSS在网页中轻松实现各种动画效果. 兼容性 animation在绝大部分主流浏览器都得到了很好的支持!还在兼容IE9的同学要 ...
- CSS3 animation动画,风车旋转、loading、人物走路动画案例
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work) 飞机动画块(他从一边到另一边飞行 - 永远). 可以使用jquery折 ...
- html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
- ae制h5文字动画_H5案例分享:CSS3 Animation动画
CSS3 Animation动画 一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
- html动画效果停顿几秒,css3 animation动画执行结束,停顿几秒后重新开始执行
要实现css3 animation动画执行结束,停顿几秒后重新开始执行的效果,首先想到的是延时执行:animation-delay,然后设置animation-iteration-count为infi ...
最新文章
- 打包几乎各程序都需要用到的宏命令和使用名空间
- 正则 ?= 和 ?= 用法 以及零宽断言等概念
- php根据手机号码获取省份
- Flask框架(flask中设置响应信息的方法,返回json数据的方法)
- 用Vue来实现购物车功能(二)
- java swing jbutton_Java 反射
- 通用技术和信息技术合格考知识点_高二信息与通用技术会考知识点
- html文件上传限制类型,html input file accept 上传文件类型限制格式 MIME 类型列表
- echarts(一)下载引入,调色盘,[标题、图例组件、坐标轴]
- kotlin将对象转换为map_将网站转换为Photoshop文档
- 打造人脉不如打造自己
- 贝叶斯信念网络和马尔科夫链有什么区别
- 加密初衷是什么?安全性or实时性
- 服务器_Windows Server 2012 服务器之Web服务器
- Java怎样获项目路径_java项目中获取路径的方式
- 通过一段代码发现 emu8086 和 DOSBox 的一点区别
- ARKit入门到精通-1.5 -基础内容-史小川-专题视频课程
- php面试题 几升水,三个水桶等分8升水的问题 -《算法的乐趣》
- 三维点云处理(5)——Clustering
- 如何修改SnipeIT的部分设置