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

Posted 2020-06-13

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);
　　}