如何解决CSS动画滑入10秒钟，然后无限向上和向下移动
我目前有一张“浮动”的图片。因此它会在10秒内上下移动。但是我真正想做的是要做的是从画布上右滑10秒钟，然后无限地漂浮。
我现在拥有的代码只是使其上下浮动，而我正努力添加部分幻灯片。我是CSS动画的新手，所以不胜感激。
这是我到目前为止所拥有的。
.shake-vertical {
-webkit-animation: shake-vertical 15s cubic-bezier(0.455,0.030,0.515,0.955) infinite both;
animation: shake-vertical 15s cubic-bezier(0.455,0.955) infinite both;
}
@-webkit-keyframes shake-vertical {
0%,100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,30%,50%,70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,40%,60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
@keyframes shake-vertical {
0%,60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
解决方法
您可以使用滑动动画设置对象10秒钟，并在animationend事件上将其类更改为震动动画。
添加CSS，如下所示：
@keyframes slidein {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(50vw);
}
}
.slidein {
animation-name:slidein;
animation-duration:10s;
animation-fill-mode: follow;
}
.shake {
animation-name: shake-vertical;
animation-duration: 10s;
animation-iteration-count: infinite;
}
}
和类似JavaScript的
obj.addEventListener("animationend",function () {
obj.classList.remove('slidein');
obj.classList.add('shake');
});
在代码段中带有简单滑动正方形的示例。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slidein {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(50vw);
}
}
@keyframes shake-vertical {
0%,100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,30%,50%,70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,40%,60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
#obj {
position: relative;
width: 50px;
height: 50px;
top: 50px;
background-color:magenta;
animation-delay:0s;
}
.slidein {
animation-name:slidein;
animation-duration:10s;
}
.shake {
left: 50vw;
animation-name:shake-vertical;
animation-duration: 10s;
animation-iteration-count: infinite;
}
</style>
</head>
<div id="obj" class="slidein"></div>
<script>
var obj = document.getElementById('obj');
obj.addEventListener("animationend",function () {
obj.classList.remove('slidein');
obj.classList.add('shake');
});
</script>
</html>,
考虑到图像的class为ball。您可以将此CSS添加到Existing CSS中：
@keyframes slide-in {
from{
margin-right: -100px;
}
to{
margin-right: 0;
}
}
.ball{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
float: right;
animation: slide-in 10s forwards,/*forwards keeps the ball at final position*/
shake-vertical 15s infinite 10s both;
/*
* Two animations applied
* comma separated
* shake-vertical has a 10 second delay specified by '10s'
* the delay should be same as the duration of first animation
*/
}
我已添加注释以供解释，但如果您需要更多注释，请随时发表评论。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。