css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transitions(过渡)

被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。

  主要包括四个属性:

    执行变换的属性:transition-property 变换延续的时间:transition-duration     变换的速率变化:transition-timing-function     变换延迟时间:transition-delay。

    1.transition-propery

      语法:transition-property:none| all |[<IDENT>] [','<IDEBT>]*       transition-property 是用来指定当前元素中一个属性改变时执行transition       效果,其主要有以下几个值:none(没有属性改变); all(所有属性改变)这个也是其默认值;indent(元素属性名)       当其值为none时,transiton马上停止执行,当指定为all时,则元素产生任何属性变化时都将执行transition效果       ident是可以指定元素的某个属性值,         1.color:通过红,黄,蓝 和透明度组件变化 如:background-color,border-color,color,outline-color等css属性;         2.length 真实的数字。如:word-spacing,width,vertical-align,top,right,bottom,left,padding,         3.percentage:真实的数字,如:如:word-spacing,width,vertical-align,top,right,bottom,left,padding,         4.integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性         5.number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性。         6.transform list         7.rectangle:通过x,y,width 和height(转为数值) 变换,如crop         8.visibility:离散步骤,在0 到1 数字范围之内,0 表示隐藏,1表示完全"显示",如visibility         9.shadow:作用于color,x,y,和blur(模糊),如text-shadow         10.gradient;通过每次停止时的位置和颜色进行变化。         11.paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似         12.space-separated list of above:如果列表有相同的项目数值,         13.a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

    2.transition-duration:

        transition-duration : <time> [, <time>]*         transition-duration 是用来指定元素,转换过程的持续时间 取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,         包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。

    3.transition-timing-function: 的值允许你根据时间的推进去属性值的变换率有6个可能值。

      1.ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线 (0.25, 0.1, 0.25, 1.0)       2.linear(均速)linear 函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0)       3.ease-in(加速),ease-in函数等同月贝塞尔曲线(0.42,0,1.0,1.0)       4.ease-out(减速),ease-out函数等同于贝塞尔曲线(0,0,0.58.1,0)       5.ease-in-out(加速然后减速),ease-in-out函数等同于贝塞尔曲线(0.42,-,0.58,1.0)       6.cubic-bezier:(该值允许你去定义一个时间曲线),特定的cubic-bezier曲线

    4.transition-delay

      transition-delay : <time> [, <time>]*       transition-delay是用来指定一个动画执行开始执行的时间,也就是说当改变元素属性值后多长时间执行transtion       其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所       有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

    把几个transition 的声明串在一起,用逗号(”,“)隔开。

      如:

			        a {
    				            -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
    				            -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
  			 	             -o-transition: background 0.5s ease-in,color 0.3s ease-out;
    				            transition: background 0.5s ease-in,color 0.3s ease-out;
  			        }

    transition一个速记法:transition: <property> <duration> <animation type> <delay>       如:

			        p {
 					             -webkit-transition: all .5s ease-in-out 1s;
  					            -o-transition: all .5s ease-in-out 1s;
  					            -moz-transition: all .5s ease-in-out 1s;
  					            transition: all .5s ease-in-out 1s;
				        }

    由于transition 最早是由webkit内核浏览器提出的, 为了支持大众类型的浏览器需要加前缀       //Mozilla内核    -moz-transition :       //Webkit内核    -webkit-transition :       //Opera      -o-transition :

Animation     Keyframes 具有其自己的语法规则 ,他的命名是由”@keyframes“ 开头,后面紧接着这个动画的名称 加上一堆花括号。     对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间     语法:

		      @keyframes IDENT {
     			        from {
      				           Properties:Properties value;
    				         }
     			        Percentage {
       				          Properties:Properties value;
   			 	         }
    			         to {
       				          Properties:Properties value;
    				         }
   			      }

或者全部写成百分比的形式:

 		       @keyframes IDENT {
      			          0% {
        			 	           Properties:Properties value;
      				        }
     	           		        Percentage {
        			 	          Properties:Properties value;
      				        }
      			        100% {
         				          Properties:Properties value;
      				        }
    			      }

其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,

		      @-webkit-keyframes 'wobble' {
    			           0% {
       				             margin-left: 100px;
        				            background: green;
    				           }
     			          40% {
       				             margin-left: 150px;
        				            background: orange;
    				           }
     			          60% {
        				            margin-left: 75px;
        				            background: blue;
     				          }	
     			          100% {
        				            margin-left: 100px;
       				             background: red;
    				             }
  			        }

元素调用animation属性        如:

		          .demo1 {
     			              width: 50px;
    			               height: 50px;
     			              margin-left: 100px;
     			              background: blue;
     			              -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/
     			              -webkit-animation-duration: 10s;/*动画持续时间*/
    			              -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
    			               -webkit-animation-delay: 2s;/*动画延迟时间*/
     			              -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/
    			               -webkit-animation-direction: alternate;/*定义动画方式*/
 		           }

    属性 1.animation-name:

        语法:animation-name: none | IDENT[,none | IDENT]*;         animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,         换句话说此处的IDENT要和Keyframes中的IDENT一致,         如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这         个属性跟前面所讲的transition一样,我们可以同时附         几个animation给一个元素,我们只需要用逗号“,”隔开。 2.animation-duratiuon         语法:animation-duration: <time>[,<time>]*         animation-duration是用来指定元素播放动画所持续的时间长,取值:<time>为数值,单位为s (秒.)其默认值为“0”。         这个属性跟transition中的transition-duration使用方法是一样的。 3.animation-timing-function:         animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。         他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。         具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。 4.animation-delay         语法:animation-delay: <time>[,<time>]*         animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。         这个属性和transition-delayy使用方法是一样的。 5.animation-iteration-count         animation-iteration-count:infinite | <number> [, infinite | <number>]*         animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。 6.animation-direction         语法: animation-direction: normal | alternate [, normal | alternate]*         animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,         动画的每次循环都是向前播放;         另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。 7.animation-play-state         语法:animation-play-state:running | paused [, running | paused]*         animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。         他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,         我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。

Transform     字母上就是变形,改变的意思,在css3中transform主要包括一下几种,旋转rotate,扭曲skew,缩放scale和移动translate     以及矩阵变形matrix     语法:transform : none | <transform-function> [ <transform-function> ]*     也就是:

        transform: rotate | scale | skew | translate |matrix;

        none表示不进怎么变换;<transform=function>表示一个或者多个变换函数,以空格分开;         换句话说就是我们同时对一个元素进行transform的多种操作,例如         rotate,scale,translate 三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,         但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

1.旋转rotate       通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。       transform-origin定义的是旋转的基点,其中angle是指旋转角度,       如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg): 2.移动translate       移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);       translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动) 3.缩放scale       缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放       (也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);       scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,       缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。 4.扭曲skew       扭曲skew和translate,secale skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);       skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形) 5.矩阵matrix       matrix(<number>, <number>, <number>, <number>, <number>, <number>) 以一个含六值的(a,b,c,d,e,f)       变换矩阵的形式指定一个2D变换,       相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素, 6.改变元素的基点 transform-origin       他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置,       换句话说我们没有使用transform-origin改变元素基点位置的情况下,       transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

    面对不同浏览器的内核     //Mozilla内核浏览器:firefox3.5+         -moz-transform-origin: x y;     //Webkit内核浏览器:Safari and Chrome       -webkit-transform-origin: x y;     //Opera       -o-transform-origin: x y ;     //IE9       -ms-transform-origin: x y;     //W3C标准

   如坐标位置发生变化: 1.transform:translate(x,y):

		      .menu ul li.translate a:hover {
     			        -moz-transform: translate(-10px,-10px);
     			        -webkit-transform: translate(-10px,-10px);
     			        -o-transform: translate(-10px,-10px);
     			        -ms-transform: translate(-10px, -10px);
     			        transform: translate(-10px,-10px);
 		       }

2.transform:translateX(x)

		     .menu ul li.translate-x a:hover {
    			      -moz-transform: translateX(-10px);
    			      -webkit-transform: translateX(-10px);
    			      -o-transform: translateX(-10px);
    			      -ms-transform: translateX(-10px);
   			       transform: translateX(-10px);          
 		     }

3.transform:translateY(y)

		       .menu ul li.translate-y a:hover {
     			      -moz-transform: translateY(-10px);
     			      -webkit-transform: translateY(-10px);
     			      -o-transform: translateY(-10px);
     			      -ms-transform: translateY(-10px);
    			       transform: translateY(-10px);          
 		    }

4.transform:rotate(角度值)

	    .menu ul li.rotate a:hover {
   			      -moz-transform: rotate(45deg);
   			      -webkit-transform: rotate(45deg);
   			      -o-transform: rotate(45deg);
   			      -ms-transform: rotate(45deg);
   			      transform: rotate(45deg);          
 		    }

5.transform:scale(x,y)

		     .menu ul li.scale a:hover {
  			       -moz-transform: scale(0.8,0.8);
   			      -webkit-transform: scale(0.8,0.8);
   			      -o-transform: scale(0.8,0.8);
   			      -ms-transform: scale(0.8,0.8);
  			       transform: scale(0.8,0.8);          
 		    }

6.transform:scaleX(x)

		   .menu ul li.scale-x a:hover {
    			      -moz-transform: scaleX(0.8);
    			      -webkit-transform: scaleX(0.8);
    			      -o-transform: scaleX(0.8);
    			      -ms-transform: scaleX(0.8);
    			      transform: scaleX(0.8);          
 		    }

7.transform:scaleY(y)

		   .menu ul li.scale-y a:hover {
     			      -moz-transform: scaleY(1.2);
    			       -webkit-transform: scaleY(1.2);
    			       -o-transform: scaleY(1.2);
     			      -ms-transform: scaleY(1.2);
     			      transform: scaleY(1.2);          
 		  }

8.transform:skew(x,y)

		   .menu ul li.skew a:hover {
    			      -moz-transform: skew(45deg,15deg);
    			       -webkit-transform: skew(45deg,15deg);
     			      -o-transform: skew(45deg,15deg);
     			      -ms-transform: skew(45deg,15deg);
     			      transform: skew(45deg,15deg);          
  		    }

9.transform:skewX(x)

		   .menu ul li.skew-x a:hover {
    			      -moz-transform: skewX(-30deg);
    			      -webkit-transform: skewX(-30deg);
    			      -o-transform: skewX(-30deg);
    			      -ms-transform: skewX(-30deg);
    			      transform: skewX(-30deg);          
 		    }

10.transform:skewY(y)

		   .menu ul li.skew-y a:hover {
    			      -moz-transform: skewY(30deg);
   			       -webkit-transform: skewY(30deg);
    			      -o-transform: skewY(30deg);
    			      -ms-transform: skewY(30deg);
    			      transform: skewY(30deg);          
 		    }

11.transform:matrix(a,b,c,d,e,f)

		  .menu ul li.matrix a:hover {
    			    -moz-transform: matrix(1,1,-1,0,0,0);
    			    -webkit-transform: matrix(1,1,-1,0,0,0);
    			    -o-transform: matrix(1,1,-1,0,0,0);
    			    -ms-transform: matrix(1,1,-1,0,0,0);
    			    transform: matrix(1,1,-1,0,0,0);          
  		  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端黑板报

canvas-画线

坐标系统简析 ? 左边是笛卡尔坐标系,右边是canvas坐标系。 笛卡尔坐标系(Cartesian coordinate system): 也称直角坐标系,是一...

26590
来自专栏菜鸟前端工程师

html+css学习笔记005-font属性0text属性

14530
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 z-index 篇

 z-index可以决定哪个元素覆盖在哪个元素上边。(这个学过ps的,想象一下图层的概念,z-index就像是调整图层的上下顺序。)

10010
来自专栏Nian糕的私人厨房

CSS 布局_2 Flex弹性盒

弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代...

12240
来自专栏程序你好

CSS盒子(Box)模型入门

无论您是CSS的新手还是经验丰富的老手,了解和理解box模型都很重要。让我们更好地了解它。

16320
来自专栏天天P图攻城狮

Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

这篇文章将给大家讲解如何在Android系统上基于OpenGL ES 2.0来实现相机实时图片涂鸦效果,所涂内容跟随人脸出现、消失、移动、旋转及缩放,在这里,我...

1.5K130
来自专栏前端儿

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

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作

30110
来自专栏互联网软件技术

canvas实现验证码

在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。

16630
来自专栏Jack的Android之旅

自定义天气显示温度变化的LinearChart控件

这次发表的是前几个月搞定的一个自定义控件,那时自己在写一个小的查看天气的软件,在这过程中就涉及了显示天气变化的折线图,一开始想用一些画图框架来解决问题,不过考虑...

28410
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 relative 篇

限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative,方位值就会...

8220

扫码关注云+社区

领取腾讯云代金券