如何将以下动画/过渡到css3？

Question

我的游戏网站上有通知系统。我在After Effects http://www.youtube.com/watch?v=HcnVYMnTI0A中做了这个，我很乐意将动画设置到我当前的通知系统。这将用于：

X用户现在在线 X开始玩游戏

唯一的问题是我不知道在css动画和关键帧方面从哪里开始。我的问题是，这可能与css关键帧有关吗？如果有的话，任何人都可以帮助或指点我的教程吗？

Answer 1

这并不是那么复杂。我们首先需要从标记开始。我已选择以下内容作为我的结构，但您可以自由地尝试使用您的标记：

<div class="newplayer">
    <img class="avatar" src="http://i.imgur.com/NKc1KMp.png" />
    <img class="videog" src="http://i.imgur.com/GbNxMVX.png" />
    <p>Janice is now online</p>
</div>

这不会给我们太多;只是几张图片和一些文字。所以我们现在需要设计它。在这一点上，我们仍然没有遇到任何复杂的问题 - 只是普通的旧CSS，你可能很熟悉：

.newplayer, .newplayer p {
    box-sizing: border-box;
}
.newplayer {
    width: 250px;
    height: 50px;
    display: block;
    cursor: pointer;
    overflow: hidden;
    margin: .5em auto;
    position: relative;
    padding-left: 100px;
    border-radius: .25em;
    box-shadow: 0 .15em .25em rgba(0, 0, 0, .5);
}
.newplayer .avatar, .newplayer .videog {
    left: 0;
    position: absolute;
}
.newplayer .videog {
    left: 50px;
}
.newplayer p {
    margin: 0;
    left: 100px;
    width: 150px;
    padding: 0 0 0 1em;
    position: absolute;
    text-transform: uppercase;
    font: bold .6em/50px tahoma;
}

这里没什么，它应该是相当直接的。此时，我们现在有以下内容：

下一步是设置折叠状态。我将通过向主容器添加一个新类来表明我希望折叠该元素：

<div class="newplayer collapsed">
    ...
</div>

现在我们需要覆盖默认样式以将其置于关闭状态：

.collapsed.newplayer {
    padding: 0;
    width: 50px;
}
.collapsed.newplayer .videog {
    left: 0;
}
.collapsed.newplayer p {
    width: 0;
}

最后，但可以说最重要的是，我们需要设置哪些属性我们想要转换的元素：

.newplayer, .newplayer p, .newplayer .videog {
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    transition: all .1s ease-in;
}

现在，每次将此类添加到元素时，它都将转换为折叠状态。在我的演示中，我只用一些JavaScript来切换这个类：

(function () {

    "use strict";

    var label = document.querySelector(".newplayer");

    label.addEventListener("click", toggle, false);

    function toggle() {
        this.classList.toggle("collapsed");
    }

}());

Voila，您可以在此处在线观看演示：http://jsfiddle.net/3AuuU/

Answer 2

看起来它应该相对容易制作动画。您可能甚至不需要可能只需要转换的关键帧：

Mozilla网站有一个非常好的演练： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations