css3 animation 中的animation-delay效果无效

最新推荐文章于 2024-05-13 15:14:44 发布
最新推荐文章于 2024-05-13 15:14:44 发布
阅读量8.9k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizi530/article/details/50488710
版权

在写实例的时候，发现如下方法写的效果总是不显示:

<html>
<head>
<title>animation</title>
</head>
<style type="text/css">

.test{
 margin: 20% 10% 0 10%;
 text-align: center;
 height: 50px;
}
.test>div{
width: 6px;
height: 100%;
background-color: green;
display: inline-block;
-webkit-animation: testAnimation 1.2s infinite ease-in-out;
}

.line2{
-webkit-animation-delay:-1.1s;
}
 .line3{
-webkit-animation-delay:-1.0s;
}
.line4{
-webkit-animation-delay:-0.9s;
}
 .line5{
-webkit-animation-delay:-0.8s;
}

/*定义指定的动画*/
@-webkit-keyframes testAnimation{
/*在执行到某一帧的时候调用指定的动作*/
0%,40%,100%{
-webkit-transform: scaleY(.4);
}
20%{
-webkit-transform: scaleY(1);
}
}


</style>
<body>

<div class="test">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>


</body>
</html>


调试后发现，改变为如下规则就能够有效果:

<html>
<head>
<title>animation</title>
</head>
<style type="text/css">

.test{
 margin: 20% 10% 0 10%;
 text-align: center;
 height: 50px;
}
.test>div{
width: 6px;
height: 100%;
background-color: green;
display: inline-block;
-webkit-animation: testAnimation 1.2s infinite ease-in-out;
}

.test .line2{
-webkit-animation-delay:-1.1s;
}
.test .line3{
-webkit-animation-delay:-1.0s;
}
.test .line4{
-webkit-animation-delay:-0.9s;
}
.test .line5{
-webkit-animation-delay:-0.8s;
}

/*定义指定的动画*/
@-webkit-keyframes testAnimation{
/*在执行到某一帧的时候调用指定的动作*/
0%,40%,100%{
-webkit-transform: scaleY(.4);
}
20%{
-webkit-transform: scaleY(1);
}
}


</style>
<body>

<div class="test">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>


</body>
</html>


可以看出，在使用delay的时候，要注意某个元素定义了animation，那么相关的元素如果要想显示效果，那么对应的选择器一定要一致

立子530
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性是现代网页设计中不可或缺的一部分，它允许开发者创建复杂的动态效果，而无需依赖JavaScript或Flash。在本文中，我们将深入探讨如何利用CSS3的animation属性来实现轮播图效果，这是一种常见的...
CSS3中Animation属性的使用详解
09-24
在CSS3中，我们通过`@keyframes`规则来创建关键帧，定义元素从开始到结束之间的多个样式变化点。 `@keyframes`的语法如下： ```css @keyframes IDENT { from { /* 0% 的样式 */ Properties: Properties value; ...
animation动画不生效_关于CSS3的animation使用的一些坑，需要注意下！
weixin_31881651的博客
12-23 3201
CSS3的animation实在是让人爱不释手，越用越觉得离不开了。较高的性能以及和js的逻辑无关性，可以专注于动画效果本身，真的很不错，尤其在手机上，只需主要考虑webkit内核的，更是爽，但随着使用，也发现一些坑，就分享给大家吧。1. 对于一个要显示动画的元素，一定要先show，然后在执行动画语句。在iPhone设备上如果先执行动画语句再显示元素，则动画可能无效，android则没问题。2. ...
自定义loading效果时使用less时用loop循环函数设置animation-delay动画延迟失效的问题
m0_61607317的博客
02-18 440
使用less 自定义动画loading时设置的循环函数时animation-delay无效，想设置出循环时后一位循环数比前一位迟一点触发来展示loading效果交替的感觉。注意：此时循环函数内部的主体：如果.dot的样式写的时候包裹在.loading里 循环时要带上父级class 否则无效！loading为外层盒子 .dot为内部小球盒子 设置好动画给到内部小球。（此时我的.dot放在了.loading里面，所以我必须两边对应上）定义循环函数 循环loading需要的小球 并设置小球循环后的位置。
解决css使用@keyframes/animation属性失效的问题
最新发布
qq_68155756的博客
05-13 476
导致该属性失效的原因可能有很多种，这里记录我遇到的一种： 以下代码阴影不生效： 以下代码阴影生效：
animate动画的使用以及动画延时，模块逐个出现，animate__delay-5s之后不生效
yh8899abc的博客
09-27 2605
1、安装 npm install animate.css --save 2、使用 <div class="animate__animated animate__fadeIn animate__delay-1s">“哈哈哈…”</div> 3、关于延时 animate__delay-1s 此属性animate__delay-1s这种延时写法最大只能animate__delay-5s生效，超出5s不生效 解决方法： <div class="content-column del
CSS3 animation动画，循环间的延时执行该怎么弄
weixin_46451295的博客
12-29 3601
在使用css做一些小的动画时，有些动画我们是需要其循环播放的，而且在部分动画中我们需要上一个循环与下一个循环之间存在一定的时间间隔，这个时候的animation-delay和transition-delay 只会在第一次动画开始的时候生效，而在两个循环之间是不生效的，这时我们就需要用其他的方法来实现循环之间的时间间隔。 方法：如下面的程序，我们可以把动画执行的总时间设置为4s，然后设置动画从75%开始，用后面的1s来做动画，前面的3s用作每次动画开始之前的延时，这样就可以解决循环播放delay失效的问题。
tailwindcss 不生效问题记录
t1234tgb的博客
08-22 1292
试试查看tailwind.config.js文件是否有设置：important: "#app"，屏蔽这行即可。
CSS3 在使用Modernizr的情况下导致animation失效
陈小峰（iefreer）的专栏
02-01 4990
如果你在CSS中设置了animation，比如.yourDiv{animation: rot 5s linear infinite;}为了浏览器兼容，加载modernizr，这会帮你自动转换。但是注意如果你在JS中动态设置了animation-delay的话，由于modernizr会自动为你添加-webkit-animation属性，这将使得你CSS中设置的animation被覆盖而失效。解决方法
CSS3 Animation文字动画特效
06-24
在本文中，我们将深入探讨CSS3 Animation在创建文字动画特效中的应用。CSS3，作为CSS（层叠样式表）的最新版本，引入了许多强大的新特性，其中包括动画功能，使得网页设计更加生动活泼，增强了用户体验。 一、CSS3 ...
CSS3中Animation动画属性用法详解
09-24
在CSS3中，Animation属性是实现动态效果的关键，它允许我们创建复杂的动画序列，而无需依赖JavaScript或者其他外部库。本文将深入讲解CSS3中的Animation属性及其用法。 首先，我们来了解一下`@keyframes`规则，这是...
css3 animation酷炫的文字动画特效
11-04
CSS3 Animation是现代网页设计中不可或缺的一部分，它允许我们为元素添加平滑、动态的效果，从而提升用户体验和视觉吸引力。在这个主题中，我们将关注如何将这些技术应用于文字，创造出引人入目的动画效果。 首先，...
animation动画不生效_手机css3动画不运行的原因是什么？
weixin_27744023的博客
12-23 1128
展开全部是css兼容性e69da5e6ba903231313335323631343130323136353331333363396464问题导致的，目前绝大部分移动浏览器还不支持animation这个属性，而是支持-webkit-animation(这类加前缀的)属性。123.ih{background:#000;opacity:.3;width:90%;height:25%;m...
css3中的transition与animation中的delay问题
kbx8916的博客
12-21 1368
两者中都有delay属性，且在两者中，如在一个transition或animation中有俩个秒数，前一个代表duration   ,或一个代表delay; 两者都要写duration的秒数，因为两者的duration的默认秒数为0； transition中可以个别属性有delay; eg： #div1 { border:2px solid #000; width:100
HTML5基础加强css样式篇（animation属性animation-name,animation-delay,animation-duration，等)（三十）
余正源的博客
04-05 2019
1.
css3 animation动画，设置循环间的延时执行
热门推荐
u010289111的专栏
04-11 2万+
使用wow.js加animate.css之后 我想实现按钮每隔几秒放大一下，提醒用户可以点击那里。 开始以为anamation有自带的每次循环之间的时间延迟。然后发现并没有 animation-delay是首次执行的延时。 然后参考了这个地址：https://segmentfault.com/q/1010000000321090 的回答 改写了animation.css的pul
css animation-delay
08-30
CSS animation-delay 是用来设置动画延迟的属性。它可以指定动画开始之前的等待时间，让动画在页面加载后的某个特定时间开始执行。 animation-delay 属性可以接受一个时间值，可以是秒(s)、毫秒(ms)或帧数(fr)。例如： ```css .animation { animation-delay: 2s; /* 2秒延迟 */ } @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } .slide-in-animation { animation-name: slide-in; animation-duration: 1s; animation-delay: 500ms; /* 500毫秒延迟 */ } ``` 在上面的例子中，第一个动画 `.animation` 在2秒后开始执行，而第二个动画 `.slide-in-animation` 在0.5秒后开始执行。 你可以根据需要使用 animation-delay 属性来控制动画的开始时间，以实现更灵活的动画效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值