时间戳

首页 > 解决方案 > 使用 CSS 制作动画

html - 使用 CSS 制作动画

问题描述

我正在尝试用 css & html 做一个“简单”的动画。我有一个图像，我想在进入页面的前 18 秒内隐藏它，之后，图像将可见并且动画将开始。动画应该以正方形的形式向屏幕两侧移动约 30 秒，然后它会消失。（就像从左下角到右下角，到右上角，右下角循环一样）。

我设法做到了一半，有点。图像隐藏的东西不工作，动画工作，但它在 30 秒后没有停止，而且，当我在另一台计算机尺寸上打开我的网站时，img 没有像我的笔记本电脑那样接触侧面（不同屏幕尺寸）。如果您能给我一个答案，我将不胜感激，谢谢！

我尝试了什么：

HTML：

.col-5 {
  width: 100px;
  height: 100px;
  position: relative;
  -webkit-animation: myfirst 3s 100;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: normal;
  /* Safari 4.0 - 8.0 */
  animation: myfirst 3s 100;
  animation-direction: normal;
  animation-delay: 18s;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes myfirst {
  0% {
    bottom: 0px;
    top: 440px;
    left: 0px;
  }
  25% {
    bottom: 0px;
    top: 0px;
    left: 0px;
  }
  50% {
    bottom: 0px;
    top: 0px;
    left: 1020px;
  }
  75% {
    bottom: 0px;
    top: 440px;
    left: 1020px;
  }
  100% {
    bottom: 0px;
    top: 440px;
    left: 0px;
  }
}
<div class='col-5'>
  <img style="margin-left: 0%; margin-top: 31%;" src="..\static\kingjulien_iliketo1.gif" style="position:relative;" width="480" height="270" class="juliengif1"></img>
</div>

标签： htmlcss

解决方案

animation:bottomleft 1s linear 1s forwards, .....第二个 1s 是第一次启动延迟。你可以做到 18 多岁。我希望这是你想要的答案。

body {
  margin:0;
}

.box {
  height:50px;
  width:50px;
  background:#262626;
  animation:bottomleft 1s linear 1s forwards, rightbottom 1s linear 2s forwards, righttop 1s linear 3s forwards, lefttop 1s linear 4s forwards;
  position:absolute;
  visibility:hidden
} 

@keyframes bottomleft {
  to {margin-top:calc(100vh - 50px);visibility:visible}
}

@keyframes rightbottom {
  to {margin-left:calc(100vw - 50px)}
}

@keyframes righttop {
  to {transform:translateY(calc(-100vh + 50px))}
}

@keyframes lefttop {
  to{margin-top:0px;margin-bottom:calc(100vh - 50px);transform:translateX(calc(-100vw + 50px));}
}
<div class="box"></div>

推荐阅读