Bre*_*nda 23 css safari mobile-safari css-animations mobile-chrome
在Safari动画延迟中,我在Safari中遇到了令人沮丧的错误.
这个动画在Chrome,Firefox,IE11,IE10的桌面上运行得非常漂亮,但我在Safari中获得了不同的结果.在等量的暂停(由动画延迟控制)之后,包的各个部分都应该显示.
桌面Safari有时会正确显示,而其他时候会减慢行李过渡的第一部分并加速结束,或者它会将几个过渡组合在一起.在iPhone 6上的移动Safari和移动Chrome中,有时它会一起忽略动画延迟并立即转换整个行李.当性能不一致时,我很难排除故障.我添加了一些JavaScript以确保在开始动画之前所有资源都已加载到页面上,但这似乎没有帮助.任何人都知道这里发生了什么?
http://codepen.io/brendamarienyc/pen/qdoOZM
@-webkit-keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
@keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
.satchel-1 {
-webkit-animation-name: bag-1;
animation-name: bag-1;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-1 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
@keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
.satchel-2 {
-webkit-animation-name: bag-2;
animation-name: bag-2;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-2 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
@keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
.satchel-3 {
-webkit-animation-name: bag-3;
animation-name: bag-3;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-3 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
@keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
.satchel-4 {
-webkit-animation-name: bag-4;
animation-name: bag-4;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-4 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
@keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
.satchel-5 {
-webkit-animation-name: bag-5;
animation-name: bag-5;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-5 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
.satchel-container {
height: 450px;
width: 472px;
margin: 2em auto;
position: relative;
}
@media (max-width: 500px) {
.satchel-container {
height: 300px;
width: 315px;
}
}
.satchel-shadow {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 94px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-shadow {
height: 63px;
width: 315px;
}
}
.satchel-body {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 295px;
width: 472px;
-webkit-animation-delay: 0;
animation-delay: 0;
}
@media (max-width: 500px) {
.satchel-body {
height: 197px;
width: 315px;
}
}
.satchel-gusset {
position: absolute;
bottom: 30px;
left: 14px;
height: 221px;
width: 441px;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
}
@media (max-width: 500px) {
.satchel-gusset {
position: absolute;
bottom: 20px;
left: 10px;
height: 149px;
width: 294px;
}
}
.satchel-piping {
position: absolute;
bottom: 22px;
left: 21px;
height: 268px;
width: 429px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-piping {
position: absolute;
bottom: 15px;
left: 14px;
height: 179px;
width: 286px;
}
}
.satchel-collar {
position: absolute;
bottom: 15px;
left: 30px;
height: 63px;
width: 412px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-collar {
position: absolute;
bottom: 7px;
left: 20px;
height: 42px;
width: 275px;
}
}
.satchel-strap {
position: absolute;
bottom: 70px;
left: 139px;
height: 370px;
width: 195px;
-webkit-animation-delay: 1350ms;
animation-delay: 1350ms;
}
@media (max-width: 500px) {
.satchel-strap {
position: absolute;
bottom: 47px;
left: 92px;
height: 247px;
width: 130px;
}
}
.satchel-narrow {
position: absolute;
bottom: 68px;
left: 13px;
height: 232px;
width: 377px;
-webkit-animation-delay: 1800ms;
animation-delay: 1800ms;
}
@media (max-width: 500px) {
.satchel-narrow {
position: absolute;
bottom: 46px;
left: 8px;
height: 155px;
width: 251px;
}
}
Run Code Online (Sandbox Code Playgroud)
即使在Chrome中显示也很好,即使存在性能问题.试图获得性能统计数据是错误的,制作6个基本设计副本并禁用GPU会在我的机器上重现问题(Windows上的Chrome).
好吧,这是我尝试优化您的设计性能.
首先,您正在使用不透明度,但没有过渡 - 从0快速移动到1.如果您想要的只是更改元素可见性,则可以使用可见性.它运行得更快.
其次,您使用的动画与5种不同的包不同.这使得第一个袋子可见 - 但在动画的最后部分隐藏在其他袋子下面.您可以为所有元素重复使用相同的动画,只需更改动画延迟即可.您将在我的演示中看到关键帧更简单,代价是动画延迟的复杂性增加.另请注意,我会尽快关闭可见性,以避免显示其他不可见元素的成本.
处理叠加层的方式要求重复每个类的第一个元素,一次是静态的,另一个是在循环结束时显示的一些时刻.我已经改变了另一个模式,我正在改变元素的z-index.现在您不需要重复元素.
最后,我将几个项目分组在一个包类,我也关闭了包容器的可见性.我相信这会以某种方式优化性能,但我不确定
我的演示:
@-webkit-keyframes satchel {
0% {
visibility: visible;
z-index: 100;
}
25% {
visibility: visible;
z-index: 1;
}
25%, 100% {
visibility: hidden;
}
}
@keyframes satchel {
0% {
visibility: visible;
z-index: 100;
}
25% {
visibility: visible;
z-index: 1;
}
25%, 100% {
visibility: hidden;
}
}
.satchel-1, .satchel-2, .satchel-3, .satchel-4, .satchel-5 {
-webkit-animation: satchel 22500ms infinite;
animation-name: satchel;
animation-duration: 22500ms;
animation-iteration-count: infinite;
}
/* body 0ms gusset 450ms collar=900ms piping=900ms strap=1350ms narrow=1800ms */
.satchel-1.satchel-body {
-webkit-animation-delay: calc(0ms - 22500ms);
animation-delay: calc(0ms - 22500ms);
}
.satchel-1.satchel-gusset {
-webkit-animation-delay: calc(450ms - 22500ms);
animation-delay: calc(450ms - 22500ms);
}
.satchel-1.satchel-collar {
-webkit-animation-delay: calc(900ms - 22500ms);
animation-delay: calc(900ms - 22500ms);
}
.satchel-1.satchel-piping {
-webkit-animation-delay: calc(900ms - 22500ms);
animation-delay: calc(900ms - 22500ms);
}
.satchel-1.satchel-strap {
-webkit-animation-delay: calc(1350ms - 22500ms);
animation-delay: calc(1350ms - 22500ms);
}
.satchel-1.satchel-narrow {
-webkit-animation-delay: calc(1800ms - 22500ms);
animation-delay: calc(1800ms - 22500ms);
}
/* satchel-2 4500ms */
.satchel-2.satchel-body {
-webkit-animation-delay: calc(0ms + 4500ms - 22500ms);
animation-delay: calc(0ms + 4500ms - 22500ms);
}
.satchel-2.satchel-gusset {
-webkit-animation-delay: calc(450ms + 4500ms - 22500ms);
animation-delay: calc(450ms + 4500ms - 22500ms);
}
.satchel-2.satchel-collar {
-webkit-animation-delay: calc(900ms + 4500ms - 22500ms);
animation-delay: calc(900ms + 4500ms - 22500ms);
}
.satchel-2.satchel-piping {
-webkit-animation-delay: calc(900ms + 4500ms - 22500ms);
animation-delay: calc(900ms + 4500ms - 22500ms);
}
.satchel-2.satchel-strap {
-webkit-animation-delay: calc(1350ms + 4500ms - 22500ms);
animation-delay: calc(1350ms + 4500ms - 22500ms);
}
.satchel-2.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 4500ms - 22500ms);
animation-delay: calc(1800ms + 4500ms - 22500ms);
}
/* satchel-3 9000ms */
.satchel-3.satchel-body {
-webkit-animation-delay: calc(0ms + 9000ms - 22500ms);
animation-delay: calc(0ms + 9000ms - 22500ms);
}
.satchel-3.satchel-gusset {
-webkit-animation-delay: calc(450ms + 9000ms - 22500ms);
animation-delay: calc(450ms + 9000ms - 22500ms);
}
.satchel-3.satchel-collar {
-webkit-animation-delay: calc(900ms + 9000ms - 22500ms);
animation-delay: calc(900ms + 9000ms - 22500ms);
}
.satchel-3.satchel-piping {
-webkit-animation-delay: calc(900ms + 9000ms - 22500ms);
animation-delay: calc(900ms + 9000ms - 22500ms);
}
.satchel-3.satchel-strap {
-webkit-animation-delay: calc(1350ms + 9000ms - 22500ms);
animation-delay: calc(1350ms + 9000ms - 22500ms);
}
.satchel-3.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 9000ms - 22500ms);
animation-delay: calc(1800ms + 9000ms - 22500ms);
}
/* satchel-4 13500ms */
.satchel-4.satchel-body {
-webkit-animation-delay: calc(0ms + 13500ms - 22500ms);
animation-delay: calc(0ms + 13500ms - 22500ms);
}
.satchel-4.satchel-gusset {
-webkit-animation-delay: calc(450ms + 13500ms - 22500ms);
animation-delay: calc(450ms + 13500ms - 22500ms);
}
.satchel-4.satchel-collar {
-webkit-animation-delay: calc(900ms + 13500ms - 22500ms);
animation-delay: calc(900ms + 13500ms - 22500ms);
}
.satchel-4.satchel-piping {
-webkit-animation-delay: calc(900ms + 13500ms - 22500ms);
animation-delay: calc(900ms + 13500ms - 22500ms);
}
.satchel-4.satchel-strap {
-webkit-animation-delay: calc(1350ms + 13500ms - 22500ms);
animation-delay: calc(1350ms + 13500ms - 22500ms);
}
.satchel-4.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 13500ms - 22500ms);
animation-delay: calc(1800ms + 13500ms - 22500ms);
}
/* satchel-5 18000ms */
.satchel-5.satchel-body {
-webkit-animation-delay: calc(0ms + 18000ms - 22500ms);
animation-delay: calc(0ms + 18000ms - 22500ms);
}
.satchel-5.satchel-gusset {
-webkit-animation-delay: calc(450ms + 18000ms - 22500ms);
animation-delay: calc(450ms + 18000ms - 22500ms);
}
.satchel-5.satchel-collar {
-webkit-animation-delay: calc(900ms + 18000ms - 22500ms);
animation-delay: calc(900ms + 18000ms - 22500ms);
}
.satchel-5.satchel-piping {
-webkit-animation-delay: calc(900ms + 18000ms - 22500ms);
animation-delay: calc(900ms + 18000ms - 22500ms);
}
.satchel-5.satchel-strap {
-webkit-animation-delay: calc(1350ms + 18000ms - 22500ms);
animation-delay: calc(1350ms + 18000ms - 22500ms);
}
.satchel-5.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 18000ms - 22500ms);
animation-delay: calc(1800ms + 18000ms - 22500ms);
}
@-webkit-keyframes bag {
0%, 35% {
visibility: visible;
}
35%, 100% {
visibility: hidden;
}
}
@keyframes bag {
0%, 35% {
visibility: visible;
}
35%, 100% {
visibility: hidden;
}
}
.bag {
-webkit-animation-name: bag;
-webkit-animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-name: bag;
animation-duration: 22500ms;
animation-iteration-count: infinite;
z-index: 1000;
position: absolute;
height: 100%;
width: 100%;
}
.bag:nth-child(2) {
-webkit-animation-delay: calc(4500ms - 22500ms);
animation-delay: calc(4500ms - 22500ms);
}
.bag:nth-child(3) {
-webkit-animation-delay: calc(9000ms - 22500ms);
animation-delay: calc(9000ms - 22500ms);
}
.bag:nth-child(4) {
-webkit-animation-delay: calc(13500ms - 22500ms);
animation-delay: calc(13500ms - 22500ms);
}
.bag:nth-child(5) {
-webkit-animation-delay: calc(18000ms - 22500ms);
animation-delay: calc(18000ms - 22500ms);
}
.satchel-container {
height: 450px;
width: 472px;
margin: 2em;
position: relative;
display: inline-block;
}
@media (max-width: 500px) {
.satchel-container {
height: 300px;
width: 315px;
}
}
.satchel-shadow {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 94px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-shadow {
height: 63px;
width: 315px;
}
}
.satchel-body {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 295px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-body {
height: 197px;
width: 315px;
}
}
.satchel-gusset {
position: absolute;
bottom: 30px;
left: 14px;
height: 221px;
width: 441px;
}
@media (max-width: 500px) {
.satchel-gusset {
position: absolute;
bottom: 20px;
left: 10px;
height: 149px;
width: 294px;
}
}
.satchel-piping {
position: absolute;
bottom: 22px;
left: 21px;
height: 268px;
width: 429px;
}
@media (max-width: 500px) {
.satchel-piping {
position: absolute;
bottom: 15px;
left: 14px;
height: 179px;
width: 286px;
}
}
.satchel-collar {
position: absolute;
bottom: 15px;
left: 30px;
height: 63px;
width: 412px;
}
@media (max-width: 500px) {
.satchel-collar {
position: absolute;
bottom: 7px;
left: 20px;
height: 42px;
width: 275px;
}
}
.satchel-strap {
position: absolute;
bottom: 70px;
left: 139px;
height: 370px;
width: 195px;
}
@media (max-width: 500px) {
.satchel-strap {
position: absolute;
bottom: 47px;
left: 92px;
height: 247px;
width: 130px;
}
}
.satchel-narrow {
position: absolute;
bottom: 68px;
left: 13px;
height: 232px;
width: 377px;
animation-delay: calc(1800ms - 22500ms);
}
@media (max-width: 500px) {
.satchel-narrow {
position: absolute;
bottom: 46px;
left: 8px;
height: 155px;
width: 251px;
}
}Run Code Online (Sandbox Code Playgroud)
<section class="bag-animation">
<div class="satchel-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-shadow.png" class="satchel-shadow">
<!--Satchel Body-->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-marble-python.png" class="satchel-1 satchel-body">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-celedon.png" class="satchel-2 satchel-body">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-blue-python.png" class="satchel-body satchel-3">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-bone.png" class="satchel-4 satchel-body">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-black-croc.png" class="satchel-5 satchel-body">
<!--bag marble-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-marble-python.png" class="satchel-1 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-marble-python.png" class="satchel-1 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-marble-python.png" class="satchel-1 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-1 satchel-narrow">
</div>
<!--bag celedon-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-celedon.png" class="satchel-2 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-celedon.png" class="satchel-2 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-celedon.png" class="satchel-2 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-celedon.png" class="satchel-2 satchel-narrow">
</div>
<!--bag blue-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-blue-python.png" class="satchel-3 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-blue-python.png" class="satchel-3 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-blue-python.png" class="satchel-3 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-3 satchel-narrow">
</div>
<!--bag bone-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-bone.png" class="satchel-4 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-bone.png" class="satchel-4 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-bone.png" class="satchel-4 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-bone.png" class="satchel-4 satchel-narrow">
</div>
<!--bag bone-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-black-croc.png" class="satchel-5 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-black-croc.png" class="satchel-5 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-black-croc.png" class="satchel-5 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-black-croc.png" class="satchel-5 satchel-narrow">
</div>
</div>
</section>Run Code Online (Sandbox Code Playgroud)
还有另一个可能性,效率会更高,但灵活性较差:您可以在合成图像中对同一类图像进行分组,并将其作为精灵变化处理(修改背景图像位置.但是您需要为这一个完全重新设计.
那么尝试使用简单的过渡代替关键帧动画呢?你只是在这里转换不透明度 - 也许通过使用自定义贝塞尔曲线你可以达到同样的效果.
你也可以尝试替换-webkit-transform:translateZ(0); with -webkit-transform:translate3d(0,0,0); - 我注意到过去两者之间存在轻微的时序问题(你使用这种技术只是为了强迫他们自己的硬件层上的元素吗?)
| 归档时间: |
|
| 查看次数: |
3846 次 |
| 最近记录: |