transform ，transition， @keyframe animantion 对比

最新推荐文章于 2024-04-30 09:57:30 发布

weixin_30437337

最新推荐文章于 2024-04-30 09:57:30 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hfhsummer/p/4587805.html

本文深入探讨了CSS中的transform变换、transition过渡效果以及@keyframes动画的关键概念和用法，详细介绍了平移、翻转、缩放、倾斜/透视等变换效果，以及如何设置transition属性来实现流畅的样式变化，最后通过@keyframes定义动画实现动态视觉效果，同时强调了兼容性考虑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.transform：对元素自身的改变。包括：

　　平移：translate(X/Y)

　　翻转:rotate(20deg)

　　缩放:scale(X/Y)

　　倾斜/透视：skew(..)

2.transiton:对元素css样式的改变（width，height，opacity。。。。），有动效，包含起始和终止两个状态。

　　transition有四个属性，transition-property transition-duration transition-timing-function transition-delay

　　transition: width 2s linear 1s

3.@keyframe annimation 顾名思义，类似于flash动画，定义了一组关键帧，也就是几个状态。每个状态可以包含多个css样式

　　如：　　@keyframes mymove{

0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

以上均为css3样式，所以实际使用时注意兼容性。

转载于:https://www.cnblogs.com/hfhsummer/p/4587805.html