• transform

定义

　   transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

值

应用 

　　如果transform与transition联合起来用，就能实现绚丽的动画效果，for example~但是如果直接应用在某个元素上，

  1.   transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         height: 100px;
  9.         width: 100px;
  10.         background-color: red;
  11.         margin-top: 100px;
  12.         margin-left: 200px;
  13.         border-radius: 100%;
  14.     }
  15.     div:hover{
  16.         transform: rotate(50deg);
  17.         transition:1s;
  18.     }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div>我是一个圆</div>
  23. </body>
  24. </html>
  • animation

 定义

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name                         规定需要绑定到选择器的 keyframe 名称
  • animation-duration                     规定完成动画所花费的时间，以秒或毫秒计
  • animation-timing-function           规定动画的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、step-start、

step-end、steps(<number>[, [ start | end ] ])）

  • animation-delay                         规定在动画开始之前的延迟。
  • animation-iteration-count            规定动画应该播放的次数。
  • animation-direction                     规定是否应该轮流反向播放动画。
  1.  
  1.    .slowWalk {
  2.     /*规定 @keyframes 动画的名称。*/
  3.     -webkit-animation-name: person-slow;
  4.     /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
  5.     -webkit-animation-duration: 950ms;
  6.     /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
  7.     -webkit-animation-iteration-count: infinite;
  8.     /*动画切换的方式是一帧一帧的改变*/
  9.     -webkit-animation-timing-function: steps(1, start);
  10.     -moz-animation-name: person-slow;
  11.     -moz-animation-duration: 950ms;
  12.     -moz-animation-iteration-count: infinite;
  13.     -moz-animation-timing-function: linear;
  14.     }
  15.  
  16.     /* 普通慢走 */
  17.  
  18.     @-webkit-keyframes person-slow {
  19.         0% {
  20.             background-position: -0px -291px;
  21.         }
  22.         25% {
  23.             background-position: -602px -0px;
  24.         }
  25.         50% {
  26.             background-position: -302px -291px;
  27.         }
  28.         75% {
  29.             background-position: -151px -291px;
  30.         }
  31.         100% {
  32.             background-position: -0px -291px;
  33.         }
  34.     }
  35.  
  36.     @-moz-keyframes person-slow {
  37.         0% {
  38.             background-position: -0px -291px;
  39.         }
  40.         25% {
  41.             background-position: -602px -0px;
  42.         }
  43.         50% {
  44.             background-position: -302px -291px;
  45.         }
  46.         75% {
  47.             background-position: -151px -291px;
  48.         }
  49.         100% {
  50.             background-position: -0px -291px;
  51.         }
  1.  
  • transition

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

  • transition-property                规定设置过渡效果的 CSS 属性的名称。
  • transition-duration                规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function      规定速度效果的速度曲线。（linear、ease、ease-in、ease-out...）
  • transition-delay                    定义过渡效果何时开始。
  • animation暂停动画和transition暂停
  1. .pauseWalk {
  2.    -webkit-animation-play-state: paused;
  3.    -moz-animation-play-state: paused;
  4. }

但是如果要停止transition运动的话，强制改变目标过渡值的处理

  1.  var left = $boy.css('left');
  2. // 强制做了一个改变目标left的处理
  3. // 动画是要运行10秒,所以此时动画还是没有结束的
  4.  $boy.css('left',left);
  5. // 增加暂停的样式
  6.  $boy.addClass('pauseWalk');

但是这样是有问题的，下一次的启动必须等上一次动画的时间结束

transform animation transition css3动画的更多相关文章

  1. jQuery Animation实现CSS3动画

    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...

  2. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  3. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  4. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  5. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  6. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  9. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

随机推荐

  1. 【spring bean】bean的配置和创建方式

    ---恢复内容开始--- 项目结构如下: lib如下: 1.首先建立SayHell.java接口 package com.it.sxd; public interface SayHell { publ ...

  2. Windows计数器做性能监控（window server 2008服务器）

    使用Windows计数器 一.创建数据收集器集 二.创建数据收集器 三.使用数据收集器 1.修改数据收集器的属性 2.手动启用.手动停止数据收集器集 3.计划任务 4.在性能监视器中查看 一.性能监视 ...

  3. c#知识总结2

    四.C#类型转换 类型转换就是把一种类型转换成为另一种类型. 隐式类型转换:c#默认的以安全方式进行的转换.例如小整数类型转换为大整数类型.派生类转换为基类 显式类型转换:用户使用的预定义的函数显式完 ...

  4. Zookeeper实战之单机模式

    Zookeeper介绍 Zookeeper 分布式服务框架是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等.本文主要从使用者角度来介 ...

  5. 分布式实时日志处理平台ELK

    这三样东西分别作用是:日志收集.索引与搜索.可视化展现 l  logstash 这张架构图可以看出logstash只是collect和index的地方,运行时传入一个.conf文件,配置分三部分:in ...

  6. 金子上的友情[XDU1011]

    Problem 1011 - 金子上的友情 Time Limit: 1000MS   Memory Limit: 65536KB   Difficulty: Total Submit: 336  Ac ...

  7. 寒冰王座[HDU1248]

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  8. unity textFilde

    #pragma strict private var editUsername:String; private var editPassword:String; private var editSho ...

  9. cordova的android notify消息通知插件

    最近在学习用CORDOVA(PHONEGAP)结合SENCHA TOUCH开发应用,想实现一个安卓下的消息通知功能,这个可以通过CORDOVA的插件来实现. 插件目录结构如下: notifyplugi ...

  10. JS function的参数问题

    1.当传入的参数个数小于声明的参数个数时,缺少的参数值就是:undefined 类似方法重载 var f1 = function(p1,p2,p3){     switch(arguments.len ...