css3实现动画的三种方式

2024-06-11 20:30:05

css实现动画主要有3种方式，第一种是：transition实现渐变动画，第二种是：transform转变动画，第三种是：animation实现自定义动画

transition渐变动画（过渡）

语法格式：transition：要过渡的属性花费的时间运动曲线何时开始;

属性：想要变化的CSS属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以

花费时间：单位是秒（必须写单位）比如0.5s

运动曲线：默认是ease（可以省略)

何时开始：单位是秒 (必须写单位)可以设置延迟触发时间默认是0s(可以省略)

transform转变动画

transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作.一般是配合transition的属性一起使用

none：定义不进行任何转换，一般用于注册掉该转换

transform-functions：定义要进行转换的类型函数

旋转(rotate)：主要分为2D旋转和3D旋转。rotate(angle)，2D 旋转，参数为角度，如45deg；rotate(x,y,z,angle)，3D旋转，围绕原地到(x,y,z)的直线进行3D旋转rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)；rotateZ(angle)；

缩放(scale)：一般用于元素的大小收缩设定。主要类型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z为收缩比例。

倾斜(skew)：主要用于对元素的样式倾斜。skew(x-angle, y-angle)，沿着x和y轴的2D倾斜转换；skewX(angle)，沿着x轴的2D倾斜转换；skew(angle)，沿着y轴的2D倾斜转换。

移动(translate)：主要用于将元素移动。translate(x, y)，定义向x和y轴移动的像素点；translate(x, y, z)，定义像x、y、z轴移动的像素点；translateX(x)；translateY(y)；translateZ(z)

animation自定义动画

定义单个动画

定义多个动画

使用动画

animation : 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;

动画名称和时长必须赋值

取值不分先后顺序

如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

可以添加多个动画

css3实现动画的三种方式相关推荐

加载gif动画的三种方式
GifView.h/*** 调用结束就开始播放动画,如果需要用户指定何时播放的话,只需要把timer的开始放到合适的位置.通过对CFDictonaryRaf 也就是gifProperties的改变,我 ...
css 实现动画的三种方式: transition 过渡、 transform 变形、 animation 关键帧动画
1.transition 过渡动画: 1. 语法:1. transition: 属性是个复合属性 .2. transition: property duration timing-function d ...
vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
【MAYA动画基础学习 1】小球动画的三种方式——关键帧，刚体和布料
基础设置调节关键帧快捷键(避免多出很多不必要的部分) 关键帧->Set Key->根据需要进行调节(下图设置为仅设置单一关键帧) 调节播放设置(避免渲染出来的效果跟maya里播放的效果不 ...
html语言闪烁特效代码,css3 实现文字闪烁效果的三种方式示例代码
1.通过改变透明度来实现文字的渐变闪烁,效果图: 文字闪烁星星之火可以燎原 .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight: ...
HTML5实现动画三种方式
HTML5实现动画三种方式编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是Canvas,还有css3和javascript.通过合理的选择,来实现最优的 ...
html5 小车动画_HTML5实现动画三种方式
编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...
JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别和三种方式写光棒事件动画...
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...
前端实现动画的6种方式详解
前端实现动画的6种方式详解一.总结一句话总结:一般是css样式改变加setInterval 二.[前端动画]实现动画的6种方式通常在前端中,实现动画的方案主要有6种: javascript直接实 ...
Github项目解析（九）--实现Activity跳转动画的五种方式
2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请标明出处:一片枫叶的专栏上一篇文章中我们讲解了在Activity ...

最新文章

热门文章