CSS3之 transform和animation区别

本文深入解析CSS3中的transform、transition和animation属性,阐述它们在网页动画制作中的应用及区别。transform用于元素的2D和3D转换,如旋转、缩放和位移;transition和animation则分别通过事件触发和时间序列实现动画效果。

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

CSS3 有3种和动画相关的属性:transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用

 

一、transform  描述的是元素静态样式

         transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 必须是鼠标移上或者点击执行属性变化,鼠标离开属性回归。说到底就是属性不会变化。配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果,否则会很生硬。

       旋转:rote(30deg)    水平面以元素中心旋转多少度;

       rotateX(angle)   定义沿着 X 轴的 3D 旋转;

       rotateY(angle)   定义沿着 Y 轴的 3D 旋转;

 

       位移 :translate(x,y)   定义 2D 转换;

       translate3d(x,y,z)  定义 3D 转换;

       缩放:scale(x,y)   定义 2D 缩放转换;

       scale3d(x,y,z)   定义 3D 缩放转换;

 

二、实现动画效果的:transition   animation

    1、transition  

     transition 属性是一个简写属性,用于设置四个过渡属性 

     transition: property duration timing-function delay;

      过渡的属性  ,完成过度效果需要时间  ,  速度曲线, 延迟时间

        .one1{transition: width 3s linear 2s;}    .one1:hover{width:300px;}

      transition定义了动画的属性、时间、速度曲线以及延迟时间  ;通常和hover等事件配合使用,由事件触发。

     

    2、animation  

      animation 属性是一个简写属性,用于设置六个动画属性:

      animation的使用必须结合@keyframes animation-name使用

         @keyframes  move{

                 form{ left:0px;}  

                 to{ left:200px;}

          }

     在需要动画的元素上面添加动画  div{animation:move 5s infinite;}

     animation: name duration timing-function delay iteration-count direction;

   动画名称,动画执行时间,速度曲线,动画延迟时间,播放次数,是否反向播放

     animation可以设定每一帧的样式和时间

   

 区别:

    1.  触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则立即播放。

     2. 循环。 animation可以设定循环次数。

     3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。

    4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值