• transform

定义

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

值

应用 

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

  transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    div{

        height: 100px;

        width: 100px;

        background-color: red;

        margin-top: 100px;

        margin-left: 200px;

        border-radius: 100%;

    }

    div:hover{

        transform: rotate(50deg);

        transition:1s;

    }

    </style>

</head>

<body>

    <div>我是一个圆</div>

</body>

</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                     规定是否应该轮流反向播放动画。






   .slowWalk {

    /*规定 @keyframes 动画的名称。*/

    -webkit-animation-name: person-slow;

    /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/

    -webkit-animation-duration: 950ms;

    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/

    -webkit-animation-iteration-count: infinite;

    /*动画切换的方式是一帧一帧的改变*/

    -webkit-animation-timing-function: steps(1, start);

    -moz-animation-name: person-slow;

    -moz-animation-duration: 950ms;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    }

    /* 普通慢走 */

    @-webkit-keyframes person-slow {

        0% {

            background-position: -0px -291px;

        }

        25% {

            background-position: -602px -0px;

        }

        50% {

            background-position: -302px -291px;

        }

        75% {

            background-position: -151px -291px;

        }

        100% {

            background-position: -0px -291px;

        }

    }

    @-moz-keyframes person-slow {

        0% {

            background-position: -0px -291px;

        }

        25% {

            background-position: -602px -0px;

        }

        50% {

            background-position: -302px -291px;

        }

        75% {

            background-position: -151px -291px;

        }

        100% {

            background-position: -0px -291px;

        }








  • transition


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


  • transition-property                规定设置过渡效果的 CSS 属性的名称。
    • 

  • transition-duration                规定完成过渡效果需要多少秒或毫秒。
    • 

  • transition-timing-function      规定速度效果的速度曲线。（linear、ease、ease-in、ease-out...）
    • 

  • transition-delay                    定义过渡效果何时开始。


  • animation暂停动画和transition暂停




.pauseWalk {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

}




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






 var left = $boy.css('left');

// 强制做了一个改变目标left的处理

// 动画是要运行10秒,所以此时动画还是没有结束的

 $boy.css('left',left);

// 增加暂停的样式

 $boy.addClass('pauseWalk');    






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


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

    
								
  1. jQuery Animation实现CSS3动画
		
    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...
    
		
    2. 
						
  2. CSS3中动画属性transform、transition和animation
		
    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
    
		
    3. 
						
  3. CSS3的变形transform、过渡transition、动画animation学习
		
    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
    
		
    4. 
						
  4. CSS3中动画属性transform、transition 和 animation
		
    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...
    
		
    5. 
						
  5. CSS3中和动画有关的属性transform、transition 和 animation
		
    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...
    
		
    6. 
						
  6. css3实践之图片轮播（Transform，Transition和Animation）
		
    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
    
		
    7. 
						
  7. 原生js判断css3动画过度(transition)结束  transitionend事件   以及关键帧keyframes动画结束(animation)回调函数 animationEnd  以及 css 过渡 transition无效
		
      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
    
		
    8. 
						
  8. CSS3 Transform、Transition和Animation属性总结
		
    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
    
		
    9. 
						
  9. CSS动画transform、transition和animation的区别
		
    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. php升级5.3到5.4，5.5，5.6
			
    Laravel要求php大于5.5.9,升级php5.3.3到5.6.14(最新版为 5.6.15 ) Add EPEL and Remi repositories onto your system: ...
    
			
    2. 
						
  2. 10692 XYM-入门之道
			
    Description 在华农的ACM界中,也有一对闻名古今的双胖师徒组合—XYM和BM. BM师父有一个特殊的癖好,BM肚子很大,因为他很 喜欢吃西瓜,但是BM的嘴很小,一次只能吃下大小不超过K的西 ...
    
			
    3. 
						
  3. DFS POJ 2676 Sudoku
			
    题目传送门 题意:数独问题,每行每列以及每块都有1~9的数字 分析:一个一个遍历会很慢.先将0的位子用vector存起来,然后用rflag[i][num] = 1 / 0表示在第i行数字num是否出现 ...
    
			
    4. 
						
  4. 使用“Empty 模式”改进 Null Object
			
    概述 Null Object 是Martin 大师提出的一种重构手段,其思想就是通过多态(派生一个Null对象)来减少逻辑(if … then …else)的判断. 而.NET中已经有Null Obj ...
    
			
    5. 
						
  5. LightOJ1360 Skyscraper（DP）
			
    题目大概是,一个数轴上n个线段,每个线段都有起始坐标.长度和权值,问从中取出没有公共交点的线段的最大权和. 取k次是个经典的最小费用最大流问题,不过这题建容量网络有20W个点,离散化最多也要6W个点, ...
    
			
    6. 
						
  6. BZOJ2675 : Bomb
			
    首先通过不断翻转坐标系,假设三个点以横坐标为第一关键字,纵坐标为第二关键字排序后A在B前面,B在C前面. 那么只需要处理以下两种情况: 1.B的纵坐标在AC之间,这时三个点的距离和为$2((x_C+y ...
    
			
    7. 
						
  7. ZOJ 3494 (AC自动机+高精度数位DP)
			
    题目链接:  http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3494 题目大意:给定一些被禁止的BCD码.问指定范围内不含有 ...
    
			
    8. 
						
  8. 密码等级：至少包含字母、大小写数字、字符中的两种 JS实现方案
			
    前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是字母.数字.字符3选2,区分大小写.对于设置得太简单的密码,予以错误提示.或者予以密码等级(低中高)显示, ...
    
			
    9. 
						
  9. xubuntu12.04配置
			
    更改源:我用上海交通大学的 首先备份Ubuntu12.04源列表sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup   #(备份下当前 ...
    
			
    10. 
						
  10. COJ968 WZJ的数据结构（负三十二）
			
    WZJ的数据结构(负三十二) 难度级别:D: 运行时间限制:5000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 给你一棵N个点的无根树,边上均有权值,每个点上有 ...
    
			
    11.