分析CSS动画Transition与Animation

发布时间:2021-11-06 15:06:19 作者:iii
来源:亿速云 阅读:144

本篇内容主要讲解“分析CSS动画Transition与Animation”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析CSS动画Transition与Animation”吧!

差异比较

CSS3差异
transition在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。

常用语鼠标事件(:hoveractive:focus:click)或键盘输入时触发

需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发。

只能定义开始状态和结束状态,不能定义中间状态。
animation可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe)的参数。

网页加载时会直接执行,可以自行控制各阶段动画的变化

animationtransition最大的不同在于transition是当参数改变时触发,而animation则是直接就执行,所有动画效果需要明确的指定关键帧的参数。

CSS3简写顺序
transitionproperty名称timing-function特效
animationname名称timing-function特效

iteration-count次数fill-mode填充模式

浏览器支持

transition写法

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: width 2s ease-in 2s;
}
.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

animation写法

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; /*8个属性中至少要有名称、时间*/
}
/*设定开始与结束状态*/
/*from 就是0%,to 就是100%*/
@keyframes change {
  from {
    background-color: #4BC0C8;
  }
  to {
    background-color: #C779D0;
  }
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; /*8个属性中至少要有名称、时间*/
}
/*设定开始与结束状态*/
/*from 就是0%,to 就是100%*/
@keyframes change {
  0% {
    background-color: #4BC0C8;
  }
  20% {
    background-color: #C779D0;
  }
  60% {
    background-color: #FEAC5E;
  }
  80% {
    background-color: #185a9d;
  }
  100% {
    background-color: #4BC0C8;
  }
}
属性
animation-name@keyframes后的名称
animation-duration时间time以秒计算,如3s initial预设值inherit继承父层
animation-timing-function特效linear等速、easeease-inease-outease-in-outstep-startstep-endsteps(int,start/end)cubic-bezier(n,n,n,n)可上官网取值使用
animation-delay以秒计算,如2s
animation-iteration-count次数number预设值为1,因此填2时,动画跑的次数为1+2=3infinite无限循环
animation-direction方向normalreverse反向、alternate先反后正
animation-fill-modeforwards使用关键帧最后的值backwards使用最开始的值both
animation-play-state播放状态pause暂停running为预设值initial预设值、inherit继承父层

到此,相信大家对“分析CSS动画Transition与Animation”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. CSS3与动画有关的属性transition、animation、transform对比
  2. web前端入门到实战:彻底掌握css动画【animation】

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

animation transition css

上一篇:JVM相关的知识点有哪些

下一篇:Java的学习方法有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》