css3新增动画
1、transiition过渡:样式改变就会执行transition
(1)格式:transiition:1s width linear,2s 1s height;
(2)参数:
- transition-property 要运动的样式 (all || [attr] || none)
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease:(逐渐变慢)默认值
linear:(匀速)
ease-in:(加速)
ease-out:(减速)
ease-in-out:(先加速后减速)
cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )http://matthewlein.com/ceaser/
(3)过渡完成事件
- Webkit内核: obj.addEventListener('webkitTransitionEnd',function(){
- },false);
- firefox: obj.addEventListener('transitionend',function(){
- },false);
2、transform2D
(1)格式:transiition:1s width linear,2s 1s height;
(2)参数:
- rotate() 旋转函数 取值度数
deg 度数
- skew() 倾斜函数 取值度数
skewX()
skewY()
- scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
- translate() 位移函数
translateX()
translateY()
- transform-origin 旋转的基点(left top左上角)
(3)注意:Transform 执行顺序问题 — 后写先执行
(4)matrix(a,b,c,d,e,f) 矩阵函数
默认:matrix(1,0,0,1,0,0)
- 通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
- 通过矩阵实现位移(ie下没有)
x轴位移: e=e+x
y轴位移: f=f+y
- 通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
- 通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
(5)变换兼容IE9以下IE版本只能通过矩阵来实现
- filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
- IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
(6)IE下基点修正
obj.style.left=(obj.parentNode.offsetWidth-obj.offsetWidth)/2+"px";
obj.style.top=(obj.parentNode.offsetHeight-obj.offsetHeight)/2+"px";
3、transform3D
(1)参数
- transform-style(preserve-3d) 建立3D空间
- Perspective 景深
- Perspective- origin 景深基点
- Transform 新增函数
rotateX():水平
rotateY():竖直
rotateZ():垂直于屏幕
translateZ():正值放大,负值缩小
scaleZ()
4、animation
(1)关键帧的时间单位
- 数字:0%、25%、100%等
- 字符:from(0%)、to(100%)
(2)格式
- @keyframes 动画名称 {
动画状态
}
@keyframes miaov_test {
from { background:red; }
to { background:green; }
}
(3)参数
- 必要属性
animation-name 动画名称(关键帧名称)
animation-duration 动画持续时间
例如: -webkit-animation-name: ‘m'; -webkit-animation-duration: 4s;
可选属性
animation-timing-function 动画运动形式
linear 匀速。
ease 缓冲。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
animation-delay 动画延迟 只是第一次
animation-iteration-count 重复次数——infinite为无限次
animation-direction 播放前重置
动画是否重置后再开始播放
alternate 动画直接从上一次停止的位置开始执行
normal 动画第二次直接跳到0%的状态开始执行
- animation-play-state 播放状态( running 播放 和paused 暂停 )
css3新增动画的更多相关文章
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- css3新增功能
CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...
- CSS3新增特性详解(二)
上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian: -webkit-tran ...
- H5和CSS3新增内容总结
CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴影(text-shadow.) 边框: 圆角(border-rad ...
- HTML5+CSS3新增内容总结!!!!!绝对干货
说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- css3新增的属性有哪些
徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
随机推荐
- eclipse web开发Server配置
用 Tomcat 和 Eclipse 开发 Web 应用程序:http://www.ibm.com/developerworks/cn/opensource/os-eclipse-tomcat/ Ec ...
- 基于Kurento的WebRTC移动视频群聊技术方案
说在前面的话:视频实时群聊天有三种架构: Mesh架构:终端之间互相连接,没有中心服务器,产生的问题,每个终端都要连接n-1个终端,每个终端的编码和网络压力都很大.群聊人数N不可能太大. Router ...
- 模仿天猫实战【SSM】——总结
第一篇文章链接:模仿天猫实战[SSM版]--项目起步 第二篇文章链接:模仿天猫实战[SSM版]--后台开发 总结:项目从4-27号开始写,到今天5-7号才算真正的完工,有许多粗糙的地方,但总算完成了, ...
- RocketMQ源码 — 八、 RocketMQ消息重试
RocketMQ的消息重试包含了producer发送消息的重试和consumer消息消费的重试. producer发送消息重试 producer在发送消息的时候如果发送失败了,RocketMQ会自动重 ...
- css那些事(一)
一.内边框padding和外边框margin属性缩写 内外边框有四个属性:padding-top,padding-right,padding-bottom,padding-left;margin-to ...
- HTML学习笔记:1.基础概念
①HTML:Hypertext Markup Language,即超文本标记语言,文件由标记组成 ②HTML发展史 (几个重要节点): 1993(IETF):HTML 1.0 1995(W3C): ...
- Flask入门之SQLAlchemy配置与数据库连接
1. 安装SQLAlchemy pip install flask-sqlalchemy 2. 导入和配置 from flask_sqlalchemy import SQLAlchemy basedi ...
- vsts + XX云服务器构建netcore+docker持续集成交付部署
持续集成交付部署是什么意思,它给我们带来什么好处? 先贴一张图 持续集成(Continuous Integration) 持续集成强调开发人员提交了新代码之后,立刻进行构建.(单元)测试(这个要看情况 ...
- java反射获取类的类名、属性名、属性类型、方法、执行方法、构造函数
public class Demo02 { @SuppressWarnings("all") public static void main(String[] args) thro ...
- 二十二、Hadoop学记笔记————Kafka 基础实战 :消费者和生产者实例
kafka的客户端也支持其他语言,这里主要介绍python和java的实现,这两门语言比较主流和热门 图中有四个分区,每个图形对应一个consumer,任意一对一即可 获取topic的分区数,每个分区 ...