Question

我在这个网站上看到了一个非常优雅和整洁的动画：

请注意“我喜欢创造伟大创意”的方式。我试图找出如何做到这一点。

有人可以指导我如何为我的网站产生类似的效果吗？

Answer 1

没有库等就相当简单..只需要用css3就可以完成。

在页面加载时应用“已加载”类或其他内容，只需定义动画以设置宽度（或scaleX）和背景位置的动画。

@-webkit-keyframes flip-in {
    0%{
         background-position: 5px -80px;
        -webkit-transform:scaleX(0);
    }
    50% {
         background-position: 5px -80px;
        -webkit-transform:scaleX(1);
    }
    100% {
         background-position: 5px 5px;
    }        
}
.loaded #text-block {
    -webkit-animation-name: flip-in;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-timing-function: ease-in-out;
}

看一下（我只把webkit样式放在示例中，所以使用chrome或safari）：

http://jsfiddle.net/adamco/gUju4/

交错效果也很简单。您可以重复使用相同的动画，只需增加每个动画的持续时间。

http://jsfiddle.net/adamco/NGL4u/

CSS3 / jQuery翻转动画

1 个答案: