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 ...
随机推荐
- windows10 conda python多版本切换
之前为了学习安装了python2.7是通过anaconda2安装的 现在想换用Python3 所以寻找版本并存 可以来回切换的方法 打开命令提示符,记住是命令提示符 不是win10自带的window ...
- jasperReport Studio java报表设计(详细)
一.环境搭建 在spring-mvc.xml加入 <!-- jasperReports--><import resource="classpath*:spring-mvc- ...
- day07
放完了愚人节的假期后就忘记更新了,这样不好,学习的态度也有点懒散了,需要调整过来,这几天在做一个退款流程,想好了建表.逻辑设计和需求分析,然后就是写具体的代码了,有些东西还是要多学习,不然书到用时方恨 ...
- spring中注解式事务不生效的问题
常用的解决方法可以百度,我针对我的问题描述一下 Mysql中InnoDB引擎才支持事务, MyISAM不支持事务. 当你尝试了各种方法解决spring中注解式事务不生效时, 一定要查看一下数据库中表的 ...
- 实验效果展示(会声会影+FSCapture)
第一步,视频录制: 利用屏幕录制软件(Eg:FSCapture,可设定矩形区域)录制信号采集过程,存储. 第二步,视频叠加制作 1)导入视频 2)主轨,复叠轨视频安插&时序调整 3)两个视频图 ...
- java里常用的redis客户端简介
Redis的各种语言客户端列表,请参见Redis Client.其中Java客户端在github上start最高的是Jedis和Redisson.Jedis提供了完整Redis命令,而Redisson ...
- 计算器源码(数学式python)
''' ******************** 请计算表达式: 1 - 2 * ( (60-30 +(-40.0/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/1 ...
- Intent传值的学习
今天学习了Intent传值的过程,有点安卓编程经验的都知道,Intent可以实现页面的跳转,可以从一个activity跳转到另一个activity,这个名义上说是界面跳转,其实这句话现在觉得说的很不严 ...
- CS224n笔记0
我准备跟随码农场hankcs大神的脚步,学习一下斯坦福的CS224n课程. 关于该课程的简介,hankcs大神已经写得很清楚了.
- 优雅地实现CSS Animation delay
今天写一个css动画时遇到一个有意思的问题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画 ...