淘先锋技术网

首页 1 2 3 4 5 6 7

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开发者能够轻松为网站添加一些炫酷动态效果的好选择。