CSS3 动画

CSS3 动画

        1.渐变

                1.介绍

                        CSS3 渐变 可以让你在两个或者多个指定颜色之间显示平稳的过渡。以前你必须使用图像来实现这些效果。现在，使用CSS3 渐变，通过代码来实现渐变可以减少请求和节约带宽。

                        CSS3 定义了两种类型的渐变

                       线性渐变                                                                              径向渐变

                        ​​​​​​​        ​​​​​​​        ​​​​​​​        

 

                 2.语法

                        1.线性渐变 方式— 向上、向下、向左、向右、对角方向

                             background ：linear-gradient ( direction , color-stop1, color-stop2,...)

                        2.径向渐变 方式 有他们的中心定义

                             background ：linear-gradient ( center , shape , size , start-color, ... , last-color）        默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse (表示椭圆)     它可以是值 circle （圆形）或 ellipse（椭圆）

        2.2D 3D 转换

                1.介绍

                        CSS3 中转换允许我们对元素进行旋转、缩放、移动、或倾斜。它分为 2D 转换和 3D 转换。     

                        在CSS2的时代，如果要做一些图片转换角度，都依赖图片、flash或者javasciript 才能完成。但是现在借助CSS3就可以轻松倾斜、缩放、移动和翻转元素。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合CSS3的 transition 和动画 keyframe 产生一些动画效果。

                   2. transform 2D 属性

                        1.介绍

                                通常的属性包含了属性名和属性值，而CSS3 的transform 属性是用函数来定义的。 transform 2D函数包括了 translate()、scale()、rotate()、skew() 书写格式：     transform:函数名（X轴值，Y轴值）

        转换效果

               2.属性

                1、translate() 函数     

                                translate（）方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。接受CSS 的标准量度单位（px）  例如： translate(X，Y)，沿着X和Y轴移动元素。

                 2、rotate()     

                                通过rotate() 方法，元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转。它以deg 为单位，单标旋转的角度。

                3、scale()     

                                通过值把宽和高转换为原尺寸的n倍，接受两个参数，前面的为宽，后面的为高。     可取值：         默认为1               缩小：0-1 之间的数             放大：大于1的数

                4、skew()     

                                根据水平轴和垂直轴翻转，接受两个或者一个值，两个值是前面为水平，后面为垂直的角度，一个值是水平轴的角度。此函数是指元素的倾斜角度

        3.transform 3D 属性

translate3d(x,y,z)	定义 3D转化
translateX(x)	定义3D转化，仅适用于X轴的值
translateY(y)	定义3D转化，仅适用于Y轴的值
translateZ(z)	定义3D转化，仅适用于Z轴的值
scale3d(x,y,z)	定义3D缩放转换
scaleX(x)	定义3D缩放转换,通过给定一个X轴的值。
scaleY(y)	定义3D缩放转换,通过给定一个Y轴的值。
scaleZ(z)	定义3D缩放转换,通过给定一个Z轴的值。
rotate3d(x,y,z,angle)	定义3D转换
rotate3d(angle)	定义沿X轴的3D 旋转
rotate3d(angle)	定义沿Y轴的3D 旋转
rotate3d(angle)	定义沿Z轴的3D 旋转

        3.过渡

                1.什么是过渡

                        使用CSS 的属性值在一段时间内平滑的过渡

                        比如：鼠标悬停后，背景色在1S 内，有白色平滑的过渡到红色。     

                        1）指定四个要素        

                                过渡属性：如 background   、color等        

                                过渡需要的时间        

                                过渡函数：过渡的速度、方式        

                                过渡延迟时间，表示开始执行的时间     

                        2）触发过渡                

                                通过用户的行为触发，如点击、悬浮等

                2.过渡属性

                        transition-property:none \ all \ property ;

                        多个属性用逗号隔开

                        可设置过渡的属性

                        颜色属性

                        取值为数值的属性

                        转换属性

                        渐变属性

                        阴影属性

                3.过渡时间     

                        transition-duratino: s \ ms ; 默认值是0，意味者不会有效果，所以必须设置transition 属性

                4.过渡函数     

                        transition-timing-function: ;

                        取值：

                        ease:默认值，规定慢速开始，然后变快，然后慢速结束的效果。

                        linear：匀速

                        ease-in ：规定以慢速开始，加速效果。

                        ease-out：规定以慢速结束，减速效果。

                        ease-in-out：规定以慢速开始和结束，先加速后减速效果。

                5.过渡延迟

                        transition-delay ：s \ ms ; 改变元素属性值后多长时间开始执行过渡效果。

                6.简写属性 transition

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

    语法：

transition ： property  duration  timing-function  delay ;
	.box{ width:200px; 
		height:200px; 
		background:red;
		transition: background 3s linear 1s}
	.box:hover{ 
		background : blue;}

                        

        4.动画

                1.animation 动画

                        过渡属性只能模拟动画效果

                        animation 属性可以制作类似flash动画     

                        通过关键帧控制动画的每一步     

                        使元素从一种样式逐渐变化成另一种样式     

                        实现复杂的动画效果

                2.@keyframes  

                        作用：用于声明动画，指定关键帧。  

                        帧： 用于分解动画动作        

                                每个帧代表某个时间点    

@keyrames name{
	form | 0%{ CSS样式}
	percent { css 样式 }
	to | 100%{ css 样式 }
}

 

                                定义每个帧上的动作

                        @keyframes 的语法

                3.animation 属性

                        animation 属性用于控制动画 调用有

                        @keyframes 定义的动画 设置动画属性，如时间、次数等

                        animation 属性是一个简写属性

                        

语法：animation : name  duration timing-function delay iteration-count  direction;

                4.动画的子属性

                        animation-name : ; 调用动画，规定需要和keyframes  的名字一致

                        animation-duration: s | ms ; 动画完成一个周期所需要的时间

                        animation-timing-function:; 规定动画的速度变化类型

                        animation-delay : s | ms ; 播放之前的延迟时间

                        animation-iteration-count :数值 | infinite ; 播放次数 | 无限次播放

                        animation-direction: normal | alternate ; 动画播放方向     

                                        normal  默认值，表示正常播放     

                                        alternate 表示轮流播放，及动画会在奇数次正常播放，而在偶数次向后播放

                        animation-fill-mode : forwards ;动画停在最后一帧    默认值是none

                        animation-play-state: paused | running ; 属性规定动画正在正常运行还是暂停       默认值 running