transition、transform 区别和应用

先说应用

1.动画循环,复杂的动画用animation。在遇到很复杂的动画那就用animation。因为animation可以定义关键帧。那你就可以控制每一帧的动画效果。

2.简单的动画,事件触发用transition。当页面中的动画是自己执行的那么我们考虑用animation,因为transition是需要借助伪类、js、@madia触发的。常见的伪类是:hover ,:focus。 常见的js就比如click事件。@media可以用于页面缩小到1000px你可以展示你需要的动画。
在这里插入图片描述

区别

一、语法:
过渡——transition: 属性名 完成时间 速度曲线 延迟时间;
动画——需要先定义关键帧,再通过animation属性引用关键帧
二、触发:
过渡:需要借助伪类、js、@media触发
动画:自动触发
三、执行次数
过渡:执行一次后不会执行,但是可以借助transitionEnd事件添加循环;
动画:可以通过属性设置循环次数;
四、复杂度
过渡:简单动画效果,可以通过属性展示动画的速度效果
动画:复杂动画效果,可以定义关键帧,控制每一帧的动画效果

详细

transition过渡效果

语法
transition: property duration timing-function delay;

描述
propertycss属性的名称
duration多长时间完成
timing-function转速曲线
delay效果开始的时候
animation动画效果

语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

描述
name定义的名称
duration多长时间完成
delay开始前多长的延迟
iteration-count播放几次
direction指定是否应该轮流反向播放动画
fill-mode结束的状态
play-state指定动画是否正在运行或已暂停
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值