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 ...
随机推荐
- 微信小程序day01-JSON配置
微信小程序 小程序代码构成 JSON配置WXML模板WXSS样式JS逻辑 1.JSON配置 小程序配置 app.json app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表 ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- nfs服务启动失败:Failed to start NFS status monitor for NFSv2/3 locking..
今天碰到个问题,服务器重启后,nfs服务就启动不了了,关闭都关不了.查看系统日志报下面的错: Aug 10 17:08:53 prod-r3-slt-s-01 systemd: Started Pre ...
- python 菱形继承问题究极版
如果只是正常的菱形继承,经典类(python2中最后一个父类不继承object类)是深度优先,即会从左边父类开始一路走到底 新式类(最后一个父类继承了object类)是广度优先,即从左边父类开始继承, ...
- Python内置函数(42)——memoryview
英文文档: class memoryview(obj) memoryview objects allow Python code to access the internal data of an o ...
- Vue轻松入门,一起学起来!
我们创建一个项目,这个项目我们细说Vue. 一.如何在项目中添加模块 我们通过npm 进行 安装 模块. 首先我们通过cmd.exe cd进入你的项目根目录,必须存在package.json文件,安装 ...
- Service Fabric部署笔记
使用 x509 证书时报错 Thumbprint contains invalid characters 原因是在 windows 证书管理器复制指纹的时候,在指纹字符串开头有不显示的字符,粘贴到 j ...
- putty 默认颜色样式修改 for windows
一.导出 putty 注册表默认配置文件 1.1 打开注册表:运行 --» regedit 找到 putty 注册表文件: [HKEY_CURRENT_USER\Software\SimonTatha ...
- C语言实现邻接矩阵创建无向图&图的深度优先遍历
/* '邻接矩阵' 实现无向图的创建.深度优先遍历*/ #include <stdio.h> #include <stdlib.h> #define MaxVex 100 // ...
- leetcode — populating-next-right-pointers-in-each-node
/** * * Source : https://oj.leetcode.com/problems/populating-next-right-pointers-in-each-node/ * Sou ...