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
CSS3(animation, trasfrom)总结的更多相关文章
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3 Animation Cheat Sheet:实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 第四十一课:CSS3 animation详解
animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...
- CSS3 animation 与JQ animate()的区别
CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...
- CSS3 animation 练习
css3 的动画让 html 页面变得生机勃勃,但是如何用好动画是一门艺术,接下来我来以一个demo为例,来练习css3 animation. 我们先详细了解一下animation 这个属性. ani ...
随机推荐
- [Swift]LeetCode391. 完美矩形 | Perfect Rectangle
Given N axis-aligned rectangles where N > 0, determine if they all together form an exact cover o ...
- [Swift]LeetCode434. 字符串中的单词数 | Number of Segments in a String
Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...
- [Swift]LeetCode953. 验证外星语词典 | Verifying an Alien Dictionary
In an alien language, surprisingly they also use english lowercase letters, but possibly in a differ ...
- [Swift]LeetCode1004. 最大连续1的个数 III | Max Consecutive Ones III
Given an array A of 0s and 1s, we may change up to K values from 0 to 1. Return the length of the lo ...
- linux下crontab的使用
在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.cron的配置文件称为“cr ...
- 【git】idea /git bash命令 操作分支
1.需求 因为目前要对项目做一些改动,而项目又即将上线,这些新的改动又不需要一起上线,所以这个时候需要在原有的master分支上重新拉出一个分支进行开发. 2.分支操作 打开git bash工具→切换 ...
- 使用xUnit为.net core程序进行单元测试 -- Assert
第一部分: http://www.cnblogs.com/cgzl/p/8283610.html Assert Assert做什么?Assert基于代码的返回值.对象的最终状态.事件是否发生等情况来评 ...
- vue+cordova构建跨平台应用集成并使用Cordova plugin
安装 //安装 vue-cil npm install --global vue-cli //安装cordova npm i cordova -g cordova 新建项目 //新建cordova 项 ...
- 说一说MVC的控制器(二)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 排查线上问题常用的几个Linux命令
top 相当于Windows任务管理器 可以看到,输出结果分两部分,前5行是总览,下面是具体的进程资源占用情况.下面逐行看一下 第1行 top - 18:14:58 up 112 days, 1:3 ...