CSS3 动画属性 - 逆战班

1、transition：过渡
transition ：过渡效果的 CSS 属性的名称完成过渡效果需要多少秒或毫秒速度效果的速度曲线过渡效果何时开始

1）过渡效果的 CSS 属性的名称（一般有）：all（默认值）、no、 width、height

2）transition-duration:规定完成过渡效果需要多少秒（s）或毫秒(ms)。

3)transition-delay:定义过渡效果何时开始。
例： 2s:延迟2s进行过渡
-2s:提前
4）transition-timing-function:规定速度效果的速度曲线。
运动形式及属性：
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

有复合写法：例：transition: all 2s linear
注：当总时间与延迟时间同时存在的时候，就有顺序了，第一个值是总时间；第二个值是延迟时间。
例：transition: 2s 3s linear all;
注：不要把transition放到hover中；

2、transform变形

1）translate位移

transform:translate(100px,100px); 分别对应 x , y值；

transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); (有3d效果）

2）scale:缩放

transform:scale(num) “num是一个比例值，正常比例1”
transform:scale(num1，num2) “两个值分别对应w 和 h”

transform:scaleX( );
transform:scaleY( );
transform:scaleZ( ); (有3d效果）

3)rotate旋转

transform:rotate(30deg) ; “单位可以是角度（deg）或弧度（rad）”
正值：顺时针旋转；负值：逆时针旋转；

transform:rotateX( );(有3d效果）
transform:rotateY( );(有3d效果）
transform:rotateZ( );

4)skew斜切
transform:skew(num1,num2); " num1,num2都是角度，针对的是x,y"

transform:skewX( );
transform:skewY( );
注：斜切没有3d写法；

注：所有的变形操作都不会影响到其他元素（类似于相对定位）
变形操作对inline（内联元素）不起作用
transform可以设置多个值
注：先执行后面的操作，在执行前面的操作
位移会受到后面要执行的旋转、缩放、斜切的影响；

5）transform基点

transform-origin
作用：主要针对旋转和缩放，默认都是中心点为基点
1
2
3、特效顺序做法小技巧
起点值、结束值
1）先把静态的效果做出来
2）把要运动的终点位置先做出来
3）指定transform变形中对应的0值（结束点位置）
4）写transform变形起点值（起点的位置）

2、animation：动画

原理：逐帧运动，会把整个过程划分成n份；
一般通过@keyframes 规则，创建动画。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间-from
100% 动画的结束时间-to
例子：

animation: mymove 开始时间动画的速度曲线延迟重复次数是否应该轮流反向播放动画

@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

1、animation-name:设置动画名字（自定义的）
animation-duration:动画的持续时间
animation-delay: 动画延迟时间
animation-iteration-count:动画重复次数，默认值1， infinite无限次数
animation-timing-function:动画运动形式

2、animation复合样式
1)

animation-fill-mode:规定动画播放之前或之后，其动画效果是否可见。
none（默认值）：运动结束之后回到初始位置，在延迟的情况下，让0%延迟后失效。
backwards：在延迟情况下，让0%在延迟前失效。
forwards:在运动结束之后，停到结束位置。
both: backwards和forwards同时生效
animation-direction:属性定义是否应该轮流反向播放动画
alternate: 一次正向（0%-100%），一次反向（100%-0%）
reverse:永远都是反向（100%-0%）
normal（默认值）：永远都是正向（0%-100%）
3、3D效果

1）perspective（景深）：离屏幕多远的距离，观察元素，值越大，幅度越小。相当于一个3D的眼镜。

rotateX
rotateY
translateZ
scaleZ
反馈回来的立体，仅限于平面

2）transform-style:3D空间

flat（默认值2d）/ preserve-3d

注：只要有厚度的立方体图形，就必须加3D控件，在立方体中默认会沿着第一个面进行旋转。

transform-origin:x y z（z不能写单词，必须写值）

perspective-origin:景深基点位置，观察元素角度

backface-visibility背面隐藏
hidden、 visible（默认值）

4、3D写法

scale3d（）：三个值，x ,y, z
translate3d( ):三个值 x, y , z
rotate3d( ):四个值
0|1（x轴是否添加旋转角度deg）
0|1（y轴是否添加旋转角度deg）
0|1（z轴是否添加旋转角度deg）

例： rotate3d(1,1,1,30deg)

案例：3D立方体样式

CSS3 动画属性 - 逆战班相关推荐

css3动画属性animation
一,animation属性 1.在css3中定义了新属性animation用于制作动画效果 2.一个完整的动画效果由animation属性和@keyframes动画帧组成. 二,animation子属 ...
旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
CSS3动画属性 animation详解（看完就会）
CSS3动画属性 animation 文章包含个人理解错误请指出往期文章 [css高级]变量详解轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
CSS3动画属性总结
动画的分类: CSS3中的动画分为:transform(平移动画).transition(过渡动画)animation (帧动画)三种. 平移动画属性:transform有如下属性: 1.平移属性:t ...
html animation 属性,CSS3动画属性：动画(animation)
一:动画(animation)的参数详解由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
CSS3动画属性之Transition
Transition 属性(过渡动画) Transition 属性是可以让元素从一个状态转换成另一个状态,这就是过渡. 一.前言之前有段时间总是混淆 transition 和 transform 属 ...
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...
css3动画属性菜鸟,CSS3 animation-timing-function 属性 | 菜鸟教程
animation-timing-function 除了上面的几种常用方式之外,还有个一实用的函数,steps(number_of_steps, direction),这个函数叫做阶梯函数,这个函数能 ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...

CSS3 动画属性 - 逆战班

CSS3 动画属性 - 逆战班相关推荐

最新文章

热门文章