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新增动画的更多相关文章

  1. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  2. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  3. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  4. css3新增功能

    CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...

  5. CSS3新增特性详解(二)

    上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian:  -webkit-tran ...

  6. H5和CSS3新增内容总结

    CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴影(text-shadow.) 边框: 圆角(border-rad ...

  7. HTML5+CSS3新增内容总结!!!!!绝对干货

    说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...

  8. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  9. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

随机推荐

  1. windows10 conda python多版本切换

    之前为了学习安装了python2.7是通过anaconda2安装的 现在想换用Python3  所以寻找版本并存 可以来回切换的方法 打开命令提示符,记住是命令提示符 不是win10自带的window ...

  2. jasperReport Studio java报表设计(详细)

    一.环境搭建 在spring-mvc.xml加入 <!-- jasperReports--><import resource="classpath*:spring-mvc- ...

  3. day07

    放完了愚人节的假期后就忘记更新了,这样不好,学习的态度也有点懒散了,需要调整过来,这几天在做一个退款流程,想好了建表.逻辑设计和需求分析,然后就是写具体的代码了,有些东西还是要多学习,不然书到用时方恨 ...

  4. spring中注解式事务不生效的问题

    常用的解决方法可以百度,我针对我的问题描述一下 Mysql中InnoDB引擎才支持事务, MyISAM不支持事务. 当你尝试了各种方法解决spring中注解式事务不生效时, 一定要查看一下数据库中表的 ...

  5. 实验效果展示(会声会影+FSCapture)

    第一步,视频录制: 利用屏幕录制软件(Eg:FSCapture,可设定矩形区域)录制信号采集过程,存储. 第二步,视频叠加制作 1)导入视频 2)主轨,复叠轨视频安插&时序调整 3)两个视频图 ...

  6. java里常用的redis客户端简介

    Redis的各种语言客户端列表,请参见Redis Client.其中Java客户端在github上start最高的是Jedis和Redisson.Jedis提供了完整Redis命令,而Redisson ...

  7. 计算器源码(数学式python)

    ''' ******************** 请计算表达式: 1 - 2 * ( (60-30 +(-40.0/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/1 ...

  8. Intent传值的学习

    今天学习了Intent传值的过程,有点安卓编程经验的都知道,Intent可以实现页面的跳转,可以从一个activity跳转到另一个activity,这个名义上说是界面跳转,其实这句话现在觉得说的很不严 ...

  9. CS224n笔记0

    我准备跟随码农场hankcs大神的脚步,学习一下斯坦福的CS224n课程. 关于该课程的简介,hankcs大神已经写得很清楚了.

  10. 优雅地实现CSS Animation delay

    今天写一个css动画时遇到一个有意思的问题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画 ...