CSS++是一个优秀的CSS动画库,它为网站添加了更多的动态效果和交互。而其中的回弹动画则是很多人喜欢的一种效果。
.bounce { animation: bounce 0.5s; -webkit-animation: bounce 0.5s; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); } }
上述代码实现了一个简单的回弹动画。首先是给需要动画的元素添加了一个class为bounce,接着是动画部分的代码。
animation和-webkit-animation分别是动画属性和浏览器私有变量。下面是具体的动画实现,在50%的时候元素上移10像素,形成一个中间落差,随后回到起始位置。
通过CSS++这种优秀的CSS动画库,回弹动画已经非常简单易用,是Web开发者能够轻松为网站添加一些炫酷动态效果的好选择。