CSS3 有3种和动画相关的属性:transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用

一、transform  描述的是元素静态样式

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 必须是鼠标移上或者点击执行属性变化,鼠标离开属性回归。说到底就是属性不会变化。配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果,否则会很生硬。

旋转:rote(30deg)    水平面以元素中心旋转多少度;

rotateX(angle)   定义沿着 X 轴的 3D 旋转;

rotateY(angle)   定义沿着 Y 轴的 3D 旋转;

位移 :translate(x,y)   定义 2D 转换;

translate3d(x,y,z)  定义 3D 转换;

缩放:scale(x,y)   定义 2D 缩放转换;

scale3d(x,y,z)   定义 3D 缩放转换;

二、实现动画效果的:transition   animation

    1、transition  

transition 属性是一个简写属性,用于设置四个过渡属性

transition: property duration timing-function delay;

过渡的属性  ,完成过度效果需要时间  ,  速度曲线, 延迟时间

.one1{transition: width 3s linear 2s;}    .one1:hover{width:300px;}

      transition定义了动画的属性、时间、速度曲线以及延迟时间  ;通常和hover等事件配合使用,由事件触发。

     

    2、animation  

animation 属性是一个简写属性,用于设置六个动画属性:

animation的使用必须结合@keyframes animation-name使用

@keyframes  move{

form{ left:0px;}   to{ left:200px;}

          }

在需要动画的元素上面添加动画  div{animation:move 5s infinite;}

animation: name duration timing-function delay iteration-count direction;

   动画名称,动画执行时间,速度曲线,动画延迟时间,播放次数,是否反向播放

animation可以设定每一帧的样式和时间

   

 区别:

    1.  触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则立即播放。

2. 循环。 animation可以设定循环次数。

3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。

4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。

 

CSS3之 transform和animation区别的更多相关文章

  1. 2018年1月17日总结 css3里transition 和animation 区别

    transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>>  a. 在做项目中经常会遇见 ...

  2. css3 变形(transform)、转换(transition)和动画(animation)

    http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...

  3. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  4. css3之transition、transform、animation比较

    css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解.    其实, ...

  5. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  6. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  7. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  8. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  9. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

随机推荐

  1. 2977,3110 二叉堆练习1,3——codevs

    二叉堆练习1 题目描述 Description 已知一个二叉树,判断它是否为二叉堆(小根堆) 输入描述 Input Description 二叉树的节点数N和N个节点(按层输入) 输出描述 Outpu ...

  2. Spring MVC 笔记 概述

    学习笔记 模型:封装装程序数据 视图:渲染模型数据,一般来说就是输出HTML 控制:处理请求,构建模型并将其传递给视图进行渲染 以上三者均围绕DispatcherServlet设计,它处理所有的HTT ...

  3. rsync全网备份

    rsync备份企业方案 企业有Linux服务器又有windows服务器,备份用rsync(服务端),Linux(客户端),Windows(客户端,cwrsync,旧版本有免费版)打包压缩数据往服务器上 ...

  4. MySQL之索引以及正确使用索引

    一.MySQL中常见索引类型 普通索引:仅加速查询 主键索引:加速查询.列值唯一.表中只有一个(不可有null) 唯一索引:加速查询.列值唯一(可以有null) 组合索引:多列值组成一个索引,专门用于 ...

  5. String formatting in Python

    | \n | 换行   || \t | 制表符 || \  | 转义   || \\ | \      | the '%' operator is used to format a set of va ...

  6. windows 实现vue命令行

    在代码编辑器里写好文件的位置,以及相关的命令,保存文件类型是.cmd

  7. NOI2017爆零记[AFO]

    WC2017 12分……全省第一…… APIO2017 4分……全省第二…… 千言万语汇成两个表格 NOI2017 114分(笔试100+一试4+二试5+A类5)……全省第三…… 全场最菜…… day ...

  8. RestEasy用户指南---第6章.@QueryParam

    转载说明出处:http://blog.csdn.net/nndtdx/article/details/6870391 原文地址 http://docs.jboss.org/resteasy/docs/ ...

  9. hdu_1861_游船出租_201402282130

    游船出租 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  10. What you can talk

    data buffer who locked the account hash join cost memory and nested loop do not. How to make it hash ...