本文详细介绍了CSS中制作动画的三种方法：过渡（transition）、变形（transform）和动画（animation）。过渡主要用于伪类选择器，实现简单动画效果；变形包括rotate、scale和translate，可用于元素的旋转、缩放和位移，不影响其他元素布局；动画则适用于复杂场景，结合@keyframes定义动画帧，实现多样化效果。了解这些技巧将帮助开发者创建更生动的网页交互体验。
CSS中制作动画效果的三种方式
方法一：过渡（trantition）
trantition是过渡性，一般用于伪类选择器，对元素变化时执行比较简单的动画效果，这些效果就是从元素原始状态到最终状态之前的变化动画。
这个过渡必要的两个属性值 为CSS的属性名以及动画执行的时长，如果一个元素需要有多个属性进行过渡的话，需要在tranition中使用进行分割。如果这些属性都是统一进行变化的话，也可以直接使用all，基本上所有CSS的属性都可以进行过渡，但也有一些属性是没有办法过渡的，这些属性一般来讲就是会直接让元素的本质变化的属性，或者是值是没有办法进行量变的。通过这些来判断这个属性是否可以进行过渡。
方法二：变形（transform）
rotate：旋转
scale：放大缩小
translate：位移
scale：第一个值控制我们X轴方向的大小，即宽度，第二个值控制我们Y轴方向的大小，即高度
特性：放大和缩小的时候不会影响到其他元素的布局
translate：当该属性的值为百分比的时候，它的参照物是该元素自身。即移动距离是自身宽度或者高度的相应百分比。可以配合绝对定位进行 块级元素的水平垂直居中
最低0.47元/天 解锁文章
扫一扫
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
