css3动画 效果 |css动态表达式

一、转换（transform）

transform:scale(1.5);
transform:rotate(30deg);
transform:skew(-20deg);

转换效果可以用来调整HTML元素的形状、大小和位置。通过scale实现元素的缩放，通过rotate实现元素的旋转，通过skew实现元素的斜切。

二、过渡（transition）

transition:width 2s;
transition:background-color 2s;
transition:all 2s;

过渡效果可以通过CSS属性来设置元素在指定时间内的平滑过渡。通过width实现元素宽度的过渡，通过background-color实现元素背景颜色的过渡，通过all实现所有CSS属性的过渡。

三、动画（animation）

@keyframes myAnimation {
from {opacity: 0;}
to {opacity: 1;}
}
animation:myAnimation 2s infinite;

动画效果可以通过关键帧（keyframes）实现自定义动画效果。通过from和to指定元素的初始状态和结束状态，通过animation设置关键帧的名称、持续时间和动画的重复次数。

以上就是CSS3动画效果的三种基础应用。使用它们可以让你的网站页面更加醒目、生动、有趣。希望这篇文章对你有所帮助。