文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >CSS图像动画可在除safari以外的所有浏览器中运行

问CSS图像动画可在除safari以外的所有浏览器中运行
EN

Stack Overflow用户
提问于 2015-03-04 02:00:55
回答 1查看 165关注 0票数 0

我正在使用CSS来翻转图像，使它们看起来像是翻转进来的。

这在除safari之外的所有浏览器中都有效。请在正确显示的chrome或firefox中打开此链接，然后在safari中打开它：

http://project-awesome.id-staging.com/SO-test/index.html

这是我的CSS：

关键帧

代码语言：javascript
运行
复制
@-moz-keyframes spin { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
@-webkit-keyframes spin { 100% {opacity:1;  -webkit-transform: rotateY(180deg); } }
@keyframes spin { 100% {opacity:1;  -webkit-transform: rotateY(180deg); transform:rotateY(180deg); } }

@-moz-keyframes spin2 { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
@-webkit-keyframes spin2 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }
@keyframes spin2 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }

@-moz-keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
@-webkit-keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
@keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin: 0 100% 0; } }

@-moz-keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0; transform-origin:100% 0 0 } }
@-webkit-keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin:0 0 100% 0; transform-origin:0 0 100% 0; } }
@keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0  ; transform-origin: 0 0 100% 0; } } 

@-moz-keyframes spin4 { 100% {opacity:1; -moz-transform: rotateY(-180deg); } }
@-webkit-keyframes spin4 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:0 100% 0; } }
@keyframes spin4 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:0 100% 0; } }

每个图像翻转：

代码语言：javascript
运行
复制
.front-1 {
  position: absolute;
  left: -65px;
  top: 54px;
  width: 72px;
  height: 72px;
  opacity:0;

  -webkit-animation:spin2 0.5s 0.5s linear forwards;
  -moz-animation:spin2 0.5s 0.5s linear forwards;
  animation:spin2 0.5s 0.5s linear forwards;

}


.front-2 {
  position: absolute;
  left: 7px;
  top: 54px;
  width: 72px;
  height: 72px;
  z-index:-94; 
  opacity:0;
  -webkit-animation:spin2 0.5s 1.2s linear forwards;
  -moz-animation:spin2 0.5s 1.2s linear forwards;
  animation:spin2 0.5s 1.2s linear forwards;

}

.front-3 {
  position: absolute;
  left: -65px;
  top: 374px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin2 0.5s 1.5s linear forwards;
  -moz-animation:spin2 0.5s 1.5s linear forwards;
  animation:spin2 0.5s 1.5s linear forwards;
}

.front-4 {
  position: absolute;
  left: 7px;
  top: 374px;
  width: 72px;
  height: 72px;
  z-index:-95;
  opacity:0;
  -webkit-animation: spin2 0.5s 2.0s linear forwards;
  -moz-animation:spin2 0.5s 2.0s linear forwards;
  animation:spin2 0.5s 2.0s linear forwards;
}

.front-5 {
  position: absolute;
  left: 79px;
  top: 446px;
  width: 72px;
  height: 72px;
  opacity:0;

}

.front-6 {
  position: absolute;
  left: 79px;
  top: 374px;
  width: 72px;
  height: 72px;
  z-index:-96;
  opacity: 0;

  -webkit-animation:spin3 0.5s 2.5s linear forwards;
  -moz-animation:spin3 .0.5s 2.5s linear forwards;
  animation:spin3 0.5s 2.5s linear forwards;
}

.front-7 {
  position: absolute;
  left: 79px;
  top: 518px;
  width: 72px;
  height: 72px;
  z-index:-99;
  opacity:0;


  -webkit-animation:spin4 0.5s 3.5s linear forwards;
  -moz-animation:spin4 0.5s 3.5s linear forwards;
  animation:spin4 0.5s 3.5s linear forwards;
}



.front-8 {
  position: absolute;
  left: 79px;
  top: 446px;
  width: 72px;
  height: 72px;
  z-index:-98;
  opacity:0;

  -webkit-animation:spin3 0.5s 3.0s linear forwards;
  -moz-animation:spin3 0.5s 3.0s linear forwards;
  animation:spin3 0.5s 3.0s linear forwards;
}








/* BACK IMAGE CLASSES */

.back-1 {
  position: absolute;
  left: 79px;
  top: 54px;
  width: 72px;
  height: 72px;
  opacity:0;

  -webkit-animation:spin 0.5s 7s linear forwards;
  -moz-animation:spin 0.5s 7s linear forwards;
  animation:spin 0.5s 7s linear forwards;
}

.back-2 {
  position: absolute;
  left: 79px;
  top: 54px;
  width: 72px;
  height: 72px;
  opacity:0;
}

.back-3 {
  position: absolute;
  left: 79px;
  top: 374px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin4 0.5s 5.5s linear forwards;
  -moz-animation:spin4 0.5s 5.5s linear forwards;
  animation:spin4 0.5s 5.5s linear forwards;
}

.back-4 {
  position: absolute;
  left: 79px;
  top: 374px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin5 0.5s 6s linear forwards;
  -moz-animation:spin5 0.5s 6s linear forwards;
  animation:spin5 0.5s 6s linear forwards;
}

.back-5 {
  position: absolute;
  left: 7px;
  top: 446px;
  width: 72px;
  height: 72px;
  opacity:0;
}

.back-6 {
  position: absolute;
  left: 79px;
  top: 446px;
  width: 72px;
  height: 72px;
  opacity:0;
  -webkit-animation:spin5 0.5s 4.5s linear forwards;
  -moz-animation:spin5 0.5s 4.5s linear forwards;
  animation:spin5 0.5s 4.5s linear forwards;
}


.back-7 {
  position: absolute;
  left: 7px;
  top: 518px;
  width: 72px;
  height: 72px;
  opacity:0;
  z-index:80;

  -webkit-animation:spin 0.5s 4s linear forwards;
  -moz-animation:spin 0.5s 4s linear forwards;
  animation:spin 0.5s 4s linear forwards;
}


.back-8 {
  position: absolute;
  left: 7px;
  top: 518px;
  width: 72px;
  height: 72px;
  opacity:0;
  z-index:-81;
  -webkit-animation:spin2 0.5s 5s linear forwards;
  -moz-animation:spin2 0.5s 5s linear forwards;
  animation:spin2 0.5s 5s linear forwards;


}

任何想法都会受到高度赞赏。

提前感谢

html
css
image
css-animations
EN

回答 1

Stack Overflow用户

发布于 2015-03-04 02:21:32

您在@-webkit-keyframes块中的一些转换中忘记了-webkit-前缀。

我不会详细介绍所有内容，但您应该像这样查找部分：

代码语言：javascript
运行
复制
@-webkit-keyframes spin2 {
    100% {
        opacity:1;
        transform:rotateY(-180deg);
        -webkit-transform-origin:100% 0 0;
        transform-origin:100% 0 0;
    }
}

并将-webkit-前缀添加到旋转转换中。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28838703

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档