CSS - 带有图像的简单动画

Question

嘿，我正在尝试用 css 做简单的动画，图像应该从左下角到左上角。我尝试执行以下操作，但没有成功:(

HTML:

<div class='col-5'>
  <img style="margin-left: 0%; margin-top: 31%;" 
  src="\C:\Users\user\Desktop\website\static\kingjulien_iliketo1.gif"
  style="position:relative; top:420px; left: 32px;" width="480" height="270" 
  class="juliengif1"></img>
</div>

CSS:

.col-5{
    -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: normal; /* Safari 4.0 - 8.0 */
     animation: myfirst 5s 2;
     animation-direction: normal;
}

@-webkit-keyframes myfirst {
0%   {margin-left: 0%; margin-top: 31%;}
100%  {margin-left: 0%; margin-top: 0%;}
}

Answer 1

这是更新代码。您可以更改动画和定位的值。希望对您有所帮助!

.col-5 {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: myfirst 1s 2; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
  animation: myfirst 1s 2;
  animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
  0%   {background: red; bottom: 0px; top: 200px;}
  100% {background: red; bottom: 200px; top: 200px;}
}

@keyframes myfirst {
  0%   {background: red; bottom: 0px; top: 200px;}
  100% {background: red; bottom: 200px; top: 0px;}
}

<div class="col-5">
  <img src="https://via.placeholder.com/350x150" alt="">
</div>