CSS动画

Question

我正在尝试使用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>

Answer 1

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

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>

Answer 2

有两点要提：图像上有多个内联样式；如果要使用内联样式，请在一个 style ="" 列表中列出所有属性。最好使用一个类：您在图像中有一个类juliengif1命名，但未在CSS中定义。我已将属性添加到代码段中/从内联样式中将其删除。 （可能是style="margin-left: 0%; margin-top: 31%; position:relative; width:480px; height:270px;"-CSS更整洁了！）

关于大小，那么您应该调查媒体查询，并撰写媒体查询以应用于您的动画，以适应不同的屏幕尺寸。

我建议在图像上使用alt标签，以防图像不显示。 我将动画的持续时间更改为30秒（“ myfirst 30s”），以使动画在30秒后如您所愿地停止。我已将background-color添加到过渡动作（延迟18秒后开始）。运行它时，您会看到过渡的每一侧持续大约7.5秒（30s / 4）

希望这会有所帮助

瑞秋

#juliengif1 {
  margin-left: 0%;
  top: 31%;
  position: relative;
  width: 480px;
  height: 270px;
  background-color:blue;
}

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

/*Safari 4.0 - 8.0*/

@-webkit-keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 400px; top: 0px;}
    50%  {background: red; left: 400px; top: 300px;}
    75%  {background: yellow; left: 0px; top: 300px;}
    100% {background: red; left: 0px; top: 0px;}
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 400px; top: 0px;}
    50%  {background: red; left: 400px; top: 300px;}
    75%  {background: yellow; left: 0px; top: 300px;}
    100% {background: red; left: 0px; top: 0px;}
}

<div class='col-5'>
  <img id="juliengif1" src="..\static\kingjulien_iliketo1.gif" alt="hi">
</div>