Блог

Это то, что у меня есть до сих пор, и анимация работает, но движется в правом нижнем направлении и не заполняет мою конечную таблицу 1181 пикселей на 555 пикселей. исходный размер исходного изображения составляет 567 пикселей на 378 пикселей. И я ищу, чтобы анимация медленно увеличивалась, чтобы заполнить конечный пункт назначения (размер таблицы).

 <style type="text/css">

body{
    background-color: #1c1c1c;
    table: 1181px 555px;
    

}

#img{
  
  transform-origin: left top;
  animation: scale 6s normal forwards;
  padding-top: 250px;
  padding-left: 340px;
 
    
}

@keyframes scale {
  0% {
    transform: scale(1.0);
   }
    25% {
    transform: scale(1.5);
   }
    50% {
    transform: scale(2.0);
   }
    75% {
    transform: scale(2.5);
   }
    100% {
    transform: scale(3.0);
   }
}