更高层次的CSS动画库？

我环顾四周，但找不到任何用于制作高级动画的好资源（如卡片翻转，立方体等）。像???：CSS :: jQuery：JS。更高层次的CSS动画库？

我知道transit但我正在寻找的东西，有更多的功能和动画内置的。

2013-03-24 Alexis

先打上DuckDuckGo：http://patorjk.com/blog/2011/06/13/css3-card-flip-animation-trick/和http://css3.bradshawenterprises.com/flip/ – 2013-03-24 20:58:37

今天我发布了一个关于CSS3转换和动画的迷你教程。你可以找到它：http://css3-magic.brunoscopelliti.com，在这里。我认为值得一看。所有的代码在Codepen上共享。 – Bruno 2013-03-24 21:23:55

你有没有想过使用Animate.css？看起来很不错。另一个好的似乎是CSS3 Animations和卡片翻转，CSS3 Playground等东西。

来源

2013-03-24 20:57:26 lifetimes

一个编辑的版本之一：http://css3.bradshawenterprises.com/flip/：

的jsfiddle：http://jsfiddle.net/PnUHr/1/

CSS

#f1_container { 
    position: relative; 
    margin: 10px auto; 
    width: 450px; 
    height: 281px; 
    z-index: 1; 
} 
#f1_container { 
    -webkit-perspective: 1000; 
    perspective: 1000; 
} 
#f1_card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 1.0s linear; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 
.face.back { 
    display: block; 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
}

HTML

<div id="f1_container"> 
    <div id="f1_card" class="shadow"> 
     <div class="front face"> 
      <img src="Cirques.jpg"/> 
     </div> 
     <div class="back face center"> 
      <img src="Cirques.jpg" style="transform:scaleX(-1), transform:scaleY(-1)"/> 
     </div> 
    </div> 
</div>

所有学分转到原创（见链接）。我刚刚删除了背面<div>上的填充，并添加了镜像背景的前置图像。

对于Mozilla/Gecko浏览器，您还需要添加-moz-*前缀。相同的Opera（-o-*) and Internet Explorer ( -ms- *`）。

直接图像链接：http://css3.bradshawenterprises.com/images/Cirques.jpg

来源

2013-03-24 21:10:04

Effeckt.css仍在进行中的工作，但看起来很promising-的多个来源的模式libary。

来源

2014-02-12 17:28:02

更高层次的CSS动画库？

回答

相关问题