css:过渡与动画

最新推荐文章于 2024-05-23 18:26:22 发布

hpkerkabutojoker

最新推荐文章于 2024-05-23 18:26:22 发布

阅读量177

点赞数

分类专栏：实习文章标签： transition animation

本文链接：https://blog.csdn.net/hpkerkabutojoker/article/details/102672313

版权

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

在CSS3里使用transition可以实现补间动画（过渡效果），A状态，B状态，

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform transform 变换变形的意思《 transformers 变形金刚》

translate 移动平移的意思

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iGeL4YVv-1571664112155)(C:\Users\郭由康\Desktop\1498443715586.png)]$

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

关注