html - 如何使 CSS 动画在 IOS Chrome 上运行?
问题描述
我仅使用不适用于 IOS (iPhone 11) Chrome 的 CSS 制作了动画。它适用于桌面 Chrome、Firefox 和 Safari。但是,它在 iPhone 上无法正常工作。我确实尝试为-webkit-
转换实现前缀,但是仍然无法让它工作。
.message_bar {
width: 100%;
position: absolute;
margin: 0;
padding: 0;
background: #333;
height: 40px;
text-align: center;
overflow: hidden;
}
.message_bar span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #fff;
font-size: 14px;
line-height: 14px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 100%;
}
.a111 {
-webkit-animation: rotateWord0 10s linear infinite 0s;
-ms-animation: rotateWord0 10s linear infinite 0s;
animation: rotateWord0 10s linear infinite 0s;
}
.a222 {
-webkit-animation: rotateWord 10s linear infinite 3s;
-ms-animation: rotateWord 10s linear infinite 3s;
animation: rotateWord 10s linear infinite 3s;
}
@-webkit-keyframes rotateWord {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
}
40% {
opacity: 1;
-webkit-transform: translateY(0px);
}
50% {
opacity: 1;
-webkit-transform: translateY(0px);
}
60% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
90% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
100% {
opacity: 0;
-webkit-transform: translateY(40px);
}
}
@-ms-keyframes rotateWord {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
}
40% {
opacity: 1;
-webkit-transform: translateY(0px);
}
50% {
opacity: 1;
-webkit-transform: translateY(0px);
}
60% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
90% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
100% {
opacity: 0;
-webkit-transform: translateY(40px);
}
}
@keyframes rotateWord {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
}
40% {
opacity: 1;
-webkit-transform: translateY(0px);
}
50% {
opacity: 1;
-webkit-transform: translateY(0px);
}
60% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
90% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
100% {
opacity: 0;
-webkit-transform: translateY(40px);
}
}
@-webkit-keyframes rotateWord0 {
0% {
opacity: 1;
-webkit-transform: translateY(0px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
}
40% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
50% {
opacity: 0;
-webkit-transform: translateY(40px);
}
80% {
opacity: 0;
-webkit-transform: translateY(40px);
}
90% {
opacity: 1;
-webkit-transform: translateY(0px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
}
}
@-ms-keyframes rotateWord0 {
0% {
opacity: 1;
-webkit-transform: translateY(0px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
}
40% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
50% {
opacity: 0;
-webkit-transform: translateY(40px);
}
80% {
opacity: 0;
-webkit-transform: translateY(40px);
}
90% {
opacity: 1;
-webkit-transform: translateY(0px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
}
}
@keyframes rotateWord0 {
0% {
opacity: 1;
-webkit-transform: translateY(0px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
}
40% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
50% {
opacity: 0;
-webkit-transform: translateY(40px);
}
80% {
opacity: 0;
-webkit-transform: translateY(40px);
}
90% {
opacity: 1;
-webkit-transform: translateY(0px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
}
}
<section class="message_bar">
<div class="message_bar_center">
<span class="a111">banner 1 banner 1 banner 1 banner 1 banner 1 banner 1 banner 1</span>
<span class="a222">banner 2 banner 2 banner 2 banner 2 banner 2 banner 2 banner 2 banner 2</span>
</div>
</section>
解决方案
推荐阅读
- python - 使用过滤器搜索公司出现错误,获取类型错误只能将str(Not nonetype)连接到views.py中的str在线compsearchobj
- r - R data.table 按行填充行 NA
- laravel - 如何显示数据库中的数据以在 Laravel 8 中查看。 *
- eclipse - 为什么我的 Eclipse 启动配置会忽略我的插件的环境规范?
- python - 模拟外部服务 E2E 测试
- java - 找到最大的数。描述 - 给定一个非负整数列表,将它们排列成最大的数
- laravel - 使用 laragon 时无法显示 laravel
- numpy - 使用matplotlib在.npy文件中绘制二维numpy数组?
- ruby-on-rails - Spree vs Solidus for Shopify 类似的应用程序
- android - 错误:URI 的目标不存在:Flutter 中的“package:nanoid/generate.dart”