css3中的3种和动画相关的属性:变形（transform）过渡(transtion) 动画(animation)

最新推荐文章于 2024-09-30 23:27:16 发布

BAOXFEI

最新推荐文章于 2024-09-30 23:27:16 发布

阅读量2k

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/baoxiaofeicsdn/article/details/104821248

版权

本文介绍了CSS3中的三种动画相关属性：变形(transform)、过渡(transition)和动画(animation)。变形包括旋转、扭曲、缩放和移动；过渡常与hover事件结合，用于简单的from-to效果；动画则用于灵活定制多个帧和循环。了解这些属性可以帮助开发者更好地创建动态效果。

摘要由CSDN通过智能技术生成

css3中的3种和动画相关的属性：
   变形（transform）----描述元素的静态样式，常用于配合后两者使用，实现动画效果
   过渡(transtion)----常和hover等事件配合使用，由事件触发。只能设定头尾。所有样式属性都要一起变化。
   动画(animation)----和gif动态图差不多，立即播放。可以设定循环次数。可以设定每一帧的样式和时间。

   结论：
       如果要灵活定制多个帧以及循环，用animation.
       如果要简单的from to 效果，用 transition.
       如果要使用js灵活设定动画属性，用transition.

   transform：
       字面上就是变形，改变的意思，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。
       Transform包含了
           旋转rotate：
               通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。
               transform-origin定义旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。