创建动画序列,需要使用 animation
属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes
规则实现
属性 | 描述 |
---|---|
animation-name |
指定由 @keyframes 描述的关键帧名称 |
animation-duration |
设置动画一个周期的时长 |
animation-delay |
设置延时,即从元素加载完成之后到动画序列开始执行的这段时间 |
animation-direction |
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行 |
animation-iteration-count |
设置动画重复次数, 可以指定 infinite 无限次重复动画 |
animation-play-state |
允许暂停和恢复动画 |
animation-timing-function |
设置动画速度, 即通过建立加速度曲线,设置动画在关键帧之间是如何变化 |
animation-fill-mode |
规定元素在不播放动画时的样式(在开始前、结束后,或两者同时) |
@keyframes test {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes test {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
当然,当我们的关键帧不止 2 帧的时,更推荐使用百分比定义的方式
除此之外,当动画的起始帧等同于 CSS 规则中赋予的值并且没有设定 animation-fill-mode
,0% 和 from 这一帧是可以删除的
animation-delay
就比较有意思了,它可以设置动画延时,即从元素加载完成之后到动画序列开始执行的这段时间
animation
属性,也可以简写为 animation: test 2s 1s
,第一个时间值表示持续时间,第二个时间值表示延迟时间div {
width: 100px;
height: 100px;
background: #000;
animation-name: test;
animation-duration: 2s;
}
div:nth-child(2) {
animation-delay: 1s;
}
@keyframes test {
0% {
transform: translate(0);
}
100% {
transform: translate(200px);
}
}
关于 animation-delay
,最有意思的技巧在于,它可以是负数。也就是说,虽然属性名是动画延迟时间,但是运用了负数之后,动画可以提前进行
.div:nth-child(1) {
animation: test 3s infinite linear;
}
.div:nth-child(2) {
animation: test 3s infinite -1s linear;
}
.div:nth-child(3) {
animation: test 3s infinite -2s linear;
}
同一个动画,我们利用一定范围内随机的 animation-duration
和一定范围内随机的 animation-delay
,可以有效的构建更为随机的动画效果,让动画更加的自然
animation-direction 属性可接受以下值:
我们利用 sass 的循环和 random() 函数,让 animation-duration
在 2-4 秒范围内随机,让 animation-delay
在 1-2 秒范围内随机,这样,我们就可以得到非常自然且不同的上升动画效果,基本不会出现重复的画面,很好的模拟了随机效果
@for $i from 1 to 11 {
li:nth-child(#{
$i}) {
animation-duration: #{
random(2000) / 1000 + 2}s;
animation-delay: #{
random(1000) / 1000 + 1}s;
}
}
缓动函数在动画中非常重要,它定义了动画在每一动画周期中执行的节奏
缓动主要分为两类:
animation-timing-function 属性可接受以下值:
这里有个非常好用的网站 – https://cubic-bezier.com/ 用于创建和调试生成不同的贝塞尔曲线参数
步骤缓动函数的几种表现形态
{
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(6, start)
animation-timing-function: steps(4, end);
}
animation-timing-function: steps(6)
可以将其用一个 CSS 动画串联起来.box {
width: 256px;
height: 256px;
background: url('@/assets/img/test.jpg');
animation: test 0.6s steps(6, end) infinite;
}
@keyframes test {
0% {
background-position: 0 0;
}
100% {
background-position: -1536px 0;
}
}
animation
: sprite .6s steps(6) infinite 动画@keyframes
动画分为 6 次(6 帧)执行,而整体的动画时间是 0.6s,所以每一帧的停顿时长为 0.1sbackground-position
: 0 0 到 background-position
: -1536px 0,由于上述的 CSS 代码没有设置 background-repeat
,所以其实 background-position
: 0 0 是等价于 background-position
: -1536px 0,就是图片在整个动画过程中推进了一轮,只不过每一帧停在了特点的地方,一共 6 帧background-position
的取值其实只有 background-position
: 0 0,background-position
: -256px 0,background-position
: -512px 0 依次类推一直到 background-position
: -1536px 0,由于背景的 repeat
的特性,其实刚好回到原点,由此又重新开始新一轮同样的动画同个动画效果的补间动画和逐帧动画演绎对比
steps
将补间动画变成逐帧动画.box {
animation: test 2s steps(10) infinite;
}
@keyframes test {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
animation-play-state
,顾名思义,它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一
它的取值只有两个(默认为 running):animation-play-state
: paused | running;
使用起来也非常简单,看下面这个例子,我们在 hover 按钮的时候,实现动画的暂停:
.box {
width: 100px;
height: 100px;
background: deeppink;
animation: test 2s linear infinite alternate;
}
@keyframes test {
100% {
transform: translate(100px, 0);
}
}
.stop:hover ~ .box {
animation-play-state: paused;
}
animation-fill-mode
属性可接受以下值:
none
- 默认值。动画在执行之前或之后不会对元素应用任何样式forwards
- 元素在动画开始之前的样式为 CSS 规则设定的样式,而动画结束后的样式则表现为由执行期间遇到的最后一个关键帧计算值(也就是停在最后一帧)backwards
- 元素在动画开始之前(包含未触发动画阶段及 animation-delay 期间)的样式为动画运行时的第一帧,而动画结束后的样式则恢复为 CSS 规则设定的样式both
- 综合了 animation-fill-mode: backwards 和 animation-fill-mode: forwards 的设定。动画开始前的样式为动画运行时的第一帧,动画结束后停在最后一帧animation-iteration-count
控制动画运行的次数,可以是数字或者 infinite
,注意,数字可以是小数
animation-direction
控制动画的方向,正向、反向、正向交替与反向交替
在上面讲述 animation-fill-mode
时,我使用了动画运行时的第一帧替代了@keyframes
中定义的第一帧这种说法,因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向 animation-direction
和 animation-iteration-count
的影响
在 CSS 动画中,由 animation-iteration-count
和 animation-direction
共同决定动画运行时的第一帧和最后一帧的状态
animation-direction
决定animation-iteration-count
和 animation-direction
决定.box {
animation: test 4s linear;
animation-play-state: paused;
transform: translate(0, 0);
}
@keyframes test {
0% {
transform: translate(100px, 0);
}
100% {
transform: translate(300px, 0);
}
}
元素没有设置位移 transform: translate(0, 0),而在动画中,第一个关键帧和最后一个关键的 translateX 分别是 100px、300px,配合不同 animation-direction 初始状态如下
这里我们实现了一个 div 块下落动画,下落的同时产生透明度的变化:
div {
width: 100px;
height: 100px;
background: #000;
animation: combine 2s;
}
@keyframes combine {
100% {
transform: translate(0, 150px);
opacity: 0;
}
}
/* or */
div {
animation: falldown 2s, fadeIn 2s;
}
@keyframes falldown {
100% {
transform: translate(0, 150px);
}
}
@keyframes fadeIn {
100% {
opacity: 0;
}
}
文章浏览阅读3.1k次。红帽 RHEL power8 服务器小端版本,找了很久才找到,官方不提供下载了,放这里给大家对于没有HMC,没有显卡的小机运维,不想搭一堆环境的人来说是福音,SUSE11没有小端版本,12用的引导界面在SMS下全是乱码,只能用吐血两字来形容,centos 7 装上会出现IOA口驱动失败的情况,目前找不到原因,这个是官方支持带驱动的,rhel-server-7.2-ppc64le-dvd.i_rhel-server-7.2-ppc64le-dvd.iso
文章浏览阅读9.9k次,点赞2次,收藏10次。2017年随着google发布了Kotlin作为android的一级语言,与java100%互通。开发者就陆陆续续从java转到Kotlin中了,我现在有学习了Kotlin几天,的确感觉Kotlin写起来非常简洁,下面我介绍一下如何在android studio配置Kotlin环境。步骤1.在android studio中下载插件(windows)点击File->Setting->..._kotlin怎么指定jdk
文章浏览阅读108次。REM 如果不想该程序一次性查杀后就退出,可以注释掉16行的"exit",这样程序就会一直后台监控。_aceguard
文章浏览阅读1.9k次,点赞51次,收藏47次。通过这道题,我们对算法的时间复杂度和空间复杂度有了一定的理解。时间复杂度和空间复杂度并不是完全独立的两个概念,虽然它们衡量的是算法效率的不同方面,但在实际应用中,这两个因素有时会相互制约,形成一种“时间-空间”的平衡。比如:对于某些问题,使用一种时间复杂度较低的算法可能需要更多的空间来存储中间结果或额外的数据结构,而使用一种空间复杂度较低的算法可能会牺牲一些时间效率。然而,时间复杂度和空间复杂度并不是矛盾的。它们分别衡量算法在不同方面的效率,可以同时达到最优。
文章浏览阅读6.8k次,点赞3次,收藏11次。1 程序保存路径设置鼠标双击Eclipse.exe,打开Eclipse程序。首先在弹出的对话框中设置Eclipse的工作空间,即编写的安卓程序保存的路径,可以使用默认路径,也可以通过点击“Browse...”按键进行自定义设置,如图1-1所示。图1-1 设置Eclipse的工作空间2 安卓应用程序的创建2.1 新建程序在Eclipse主界面的菜单栏中,选择“File->_android中helloworld测试程序的执行过程
文章浏览阅读168次。题目判断一个数是不是为伪素数。能够通过费马测试的合数。分析数论,直接按照定义判断即可。说明学python,ヾ(◍°∇°◍)ノ゙import mathdef is_prime(x): for i in range(2, int(math.sqrt(x))+2): if x % i == 0: return False ..._uva11287
文章浏览阅读6.7k次,点赞2次,收藏14次。数据在当今世界意味着金钱。随着向基于app的世界的过渡,数据呈指数增长。然而,大多数数据是非结构化的,因此需要一个过程和方法从数据中提取有用的信息,并将其转换为可理解的和可用的形式。数据挖掘或“数据库中的知识发现”是通过人工智能、机器学习、统计和数据库系统发现大数据集中的模式的过程。免费的数据挖掘工具包括从完整的模型开发环境如Knime和Orange,到各种用Java、c++编写的库,最常..._)好用(19)
文章浏览阅读191次。java-net-php-python-jspm米兰酒店管理系统计算机毕业设计程序。springboot基于B_S模式的后勤管理系统-在线报修系统。springcloud基于微服务架构的乐居租房网的设计与实现。springboot基于springboot的社会公益平台。ssm基于web的考试资料交易系统的设计与实现。ssm基于JEE的人才招聘系统的智能化管理。springboot中国民航酒店分销系统。_米兰酒店管理系统登录
文章浏览阅读7.4k次,点赞2次,收藏2次。成本中心是无法直接和公司代码进行配对的。但是利润中心能够绑定公司代码再通过利润中心的对应公司代码可以进行成本中心对应公司代码的对应_sap 成本中心关联公司
文章浏览阅读1.6k次。真实职场关于Web api学习指南(免费开放)一一5.Web api服务结构解析_c# .net5 web api 原理
文章浏览阅读4.8k次,点赞5次,收藏15次。文章目录二元连续型随机变量,联合概率密度联合概率密度函数概率密度的性质二元连续型随机变量,联合概率密度联合概率密度函数定义:对于二元随机变量 (X,Y)(X, Y)(X,Y) 的 分布函数 F(x,y)F(x, y)F(x,y),如果存在非负函数 f(x,y)f(x,y)f(x,y),使对于任意 x,yx,yx,y,有F(x,y)=∫−∞x∫−∞yf(u,v) dudvF(x,y) ..._二元联合密度函数的分布函数
文章浏览阅读2.2k次,点赞2次,收藏20次。【PLC毕业设计】触摸屏立体车库控制系统毕业论文_200smart做毕业设计