相关疑难解决方法(0)

使用CSS,我如何申请多个transform？

示例:在下文中,仅应用平移,而不是旋转.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

除了以下列表,还有其他CSS供应商前缀对Web开发很重要吗？我的定义是否正确？我应该更具体地了解移动浏览器(例如移动Webkit)

• -khtml-(Konqueror,真的很老的Safari)
• -moz- (火狐)
• -o- (歌剧)
• -ms- (IE浏览器)
• -webkit- (Safari,Chrome)

难道这个名单(其中还包含mso-,-wap-和-atsc-)增加任何有价值的东西？

也许这是一个明显的答案,但是

为什么地球上会浏览器决定创建自己的供应商前缀border-radius之类的？

我的意思是:为什么我要打字:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

是因为每个平台都认为"我们很酷,我们会想出一个更好的方法来做圆角吗？" 为一个输入三行似乎完全无法解释多余.

我使用CSS3和关键帧在播放按钮(这是一个锚标签)上有一个简单的"脉动"效果.

虽然它在Chrome和Safari中完美运行,但它似乎并不适用于Firefox.有谁知道为什么？

li > a {

    -webkit-animation: pulsate 3s ease-in-out;
    -moz-animation: pulsate 3s ease-in-out;
    -o-animation: pulsate 3s ease-in-out;
    animation: pulsate 3s ease-in-out;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }

    50% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: …

在处理动画时,我遇到了一个没有记录的意外行为:

当使用transform(任何转换属性,仅转换属性)链接动画时,第一个动画将具有从状态A转换到状态B的预期行为,而第二个动画将从B转到C而没有任何转换.

  div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: in 2s, out 2s 3s forwards;
    animation: in 2s, out 3s 2s forwards;
}
@keyframes in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.5);
    }
}
@-webkit-keyframes in {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes out {
    from {
        -webkit-transform: scale(1);
        
    }
    to {
        -webkit-transform: scale(.5);
    }
}

<div></div>

我知道在这种特殊情况下,事情可以一步完成,但这不是我正在寻找的解决方案 …

我可以理解将它们用于非官方的实验性事物(即;不在CSS3规范中)以防止名称冲突,但为什么需要在阴影上使用前缀？

根据CSS3规范,每个供应商不应该实现相同的效果吗？

编辑:一旦CSS3完成,前缀会消失吗？我只是对一些功能有前缀的历史感到好奇,有些则没有,当效果在所有主流浏览器上看起来都相同时.

我正在参加比赛,但我遇到了一些困难.我只需要使用CSS创建一个立方体(旋转).我必须使用的唯一HTML代码是:

 <div id="container">
  <div id="imasters-cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="left"></div>
  </div>
</div>

我粘贴了一张图片,以便您可以看到我需要的结果:

http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a

到目前为止,我使用absoluted定位元素来创建6个面,但我不知道如何使用CSS进行旋转.请不要JS!

非常感谢

我使用的CSS是这样的：我不明白@keyframes和@webkit-keyframes之间的区别。

@keyframes slideDown {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0%);
    }		
  }
  
  @-webkit-keyframes slideDown {
    0% {
      -webkit-transform: translateY(-100%);
    }
   
    100% {
      -webkit-transform: translateY(0%);
    }	
}

我正在尝试制作一个小的关键帧动画。

当用户将鼠标悬停在按钮上时，我希望背景图像稍微向右移动，然后再次向后移动。如此一点“反弹”运动。

在我的第一个示例中，我在CSS中使用了一个简单的悬停，将背景位置从91％更改为93％，这将导致在悬停时移动。

但是，当我尝试执行类似操作时，要使用名为的关键帧动画nextarrow，该动画将无法运行。

这是一个JSFiddle，显示了我的工作示例（button-one）和非工作示例（button-two）

我哪里出问题了？

http://jsfiddle.net/franhaselden/Lfmegdn5/

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}