css3动画属性集合
2017-07-30 18:01
603 查看
前言
最近学习了css动画属性,感觉蛮吊的,可以实现简单的动画,以后再做一些小场景的动画,可以告别flash软件了,虽然也是好少用到,但是找到了不同方案可以解决问题,是很爽的。所以今天好好总结一下css动画属性,以便自己的知识更加牢靠。css动画属性结合(animation transform transition)
transform变形属性 (CSS3中的变形处理,实现文字和图像的旋转、缩放、倾斜和移动等)
2d属性值有:1)指定变形的基准点(在使用transform方法进行文字或图像变形的时候,默认是以元素的中心点为
基准点进行变形的,使用transform-origin属性,可以改变变形的基准点)
语法:
transform-origin:基准点在水平方向上的位置,在垂直方向上的位置;
2)移动动画--translate()方法
语法:
transform:translate(水平方向的移动距离); 或者
transform:translate(水平方向的移动距离,垂直方向的移动距离);
注意:参数表示坐标值,第二个参数可选,若省略默认为0px
translate()目前只有Firefox、Safari、Chrome以及Opera10.50+支持,到目前为止没有IE版本支持
3)倾斜动画
语法:
transform:skew(水平方向的倾斜角度); 或者
transform:skew(水平方向的倾斜角度,垂直方向的倾斜角度);
4)缩放动画
语法:
transform:scale(缩放倍率); 或者
transform:scale(水平缩放倍率, 垂直缩放倍率);
5)旋转动画
rotate()能够旋转指定的元素对象,主要再二维空间内进行操作,接受一个角度参数值,用来指定旋转的幅度,元素对象可以是内联元素和块级元素。
语法:transform:rotate(45deg);
transform功能的3d变形效果
一、旋转
语法:
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
或者:
transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
3D变形可以实现元素在X轴、Y轴、Z轴方向上的旋转、缩放、倾斜以及移动变形处理
二、缩放
语法:
transform:scaleX(0.5);
transform:scaleY(1);
transform:scaleZ(2);
或者:
transform:scaleX(0.5) scaleY(1) scaleZ(2);
3D变形可以实现元素在X轴、Y轴、Z轴方向上的旋转、缩放、倾斜以及移动变形处理
三、倾斜
语法:
transform:skewX(45deg);
transform:skewY(45deg);
z轴和2D效果类似
四、移动
语法:
transform:translateX(50px);
transform:translateY(100px);
transform:translateZ(20px);
3D变形可以实现元素在X轴、Y轴、Z轴方向上的旋转、缩放、倾斜以及移动变形处理
注意:
perspective属性相对于观众产生一个3D场景,俗称井深,你看3D物体,眼睛到画布的距离。正确的用法是他需要应用到变形元素的祖先元素上。perspective-origin为视点的位置。
Perspective:none|number 一般设置为祖先元素上
与之搭配的是transform-style: preserve-3d; 注意该属性是放在需要3d变形的元素上。
transition动画过渡属性(CSS3中的动画功能,通过一个属性值平滑过渡到另一个属性值来实现)
语法:transition:property duration timing-function delay;
property:表示对哪个属性操作
duration:表示在多久时间内完成属性值的平滑过渡
timing-function:表示通过什么方法平滑过渡
delay:表示延迟多长时间开始执行特效
分别对应三个属性:
transition-property、transition-duration、transition-timing-functon、transition-delay
注意:定义过渡效果
transition-timing-function属性用来定义过渡动画的效果。
transition-timing-function属性的初始值为ease,适用于所有元素以及:before和:after伪元素。取值简单说明如下:
ease : 缓解效果
linear :线性效果
ease-in:渐显效果
ease-out:渐隐效果
ease-in-out:渐显渐隐效果
cubic-bezier:特殊的立方贝塞尔曲线效果
animation帧动画属性(CSS3中的动画功能,通过在样式中创建多个关键帧,在这些关键帧中编写样式,并且能够在页面上综合运行这些关键帧来实现较为复杂的动画)
animation-name:指定关键帧集合的名称animation-duration:指定完成整个动画需要的时间
animation-timing-function:指定实现动画的方法
animation-delay:指定延迟多少秒或多少毫秒后开始执行动画
animation-iteration-count:指定动画的执行次数,可指定为infinite
animation-direction:指定动画执行方向,可指定属性值包括:
nomal:初始值(动画执行完毕后返回初始状态)
alternate:交替更改动画的执行方向(假如动画循环反复的,一直是0%到100%。但这个属性达到这种效果,0%-100% 100%-0%)
reverse:反方向执行动画(假如动画是0%到100%,则它执行的方向是100%先执行后执行至0%)
alternate-reverse:从反方向开始交替更改动画的执行方向(结合以上的属性的效果的综合)
animat
a6c9
ion-play-state:规定动画是否在运行或暂停 paused running
animation-fill-mode:规定对象动画时间之外的状态
综合书写方式:
animation:keyframe的名称 动画的执行时长 延迟多少秒后开始执行动画 动画的实现方法 动画的执行次数 动画的执行方向 当前动画运行状态 动画执行完毕后的状态
动画效果,请转移至我另css动画属性实现效果。大神就越过了
生活寄语
爱代码,爱上生活!相关文章推荐
- Acticle 14:css3动画属性一些小集合
- CSS3 动画Animation的8大属性
- CSS3与动画有关的属性transition、animation、transform对比
- CSS3 动画属性 animation 的基本用法
- CSS3动画属性2
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
- CSS3中的动画,animation、transition和transform属性的运用
- css3属性之2D转换、3D转换、过度、动画
- CSS3动画Animation的八大属性
- CSS3 产生动画效果的属性
- CSS3动画属性:转换(transition)
- 使用CSS3 backface-visibility:hidden;属性制作翻转动画效果
- css3-动画steps等属性
- CSS3的动画属性
- CSS3动画相关属性详解
- css3 transition属性变化与animation动画的相似性以及不同点
- css3-元素属性动画--transition
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果