无法为 .png 图像使用动画答案

【问题标题】：Not able to use animation for a .png image无法为 .png 图像使用动画
【发布时间】：2016-06-24 16:24:41
【问题描述】：

我想在图像上实现一个动画，将图像放大 10% 直到它的原始大小 (100%)。就像它从一个小尺寸开始，它的顶部、左侧、底部、右侧属性不断增加。（希望可以理解，否则请评论）

这是我的 HTML 代码：

<!DOCtype html>
    <html>
        <head>
        <meta charset="UTF-8">
        <title> Interactive Webpage Practice - 1 </title>
        <link rel="stylesheet" href="mystyle1.css"/>
        </head>
    <body>
        <span>
        <i> Your webpage is loading...</i><br>
        </span>
        <img src="welcome.png" alt="Lenny face"/>
    </body> 
    </html>

以及 CSS 代码：

* {
    padding: 0px;
    margin:0px;
}

body {
    background-color: white;
}
span {
    margin-top: 10px;
    top: 100%;
    text-align: center;
    font-size: 30px;
    color: rgb(18, 149, 216);
}

img {
    margin-top: 200px;
    margin-left: 500px;
    -webkit-animation-name: welcome_visitor;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-name: welcome_visitor;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@-webkit-keyframes  welcome_visitor {
    visibility: visible;
    0% {top: 0px; left: 0px; bottom: 0px; right: 0px;}
    10% {top: 5px; left: 5px; bottom: 5px; right: 5px; }
    20% {top: 10px; left: 10px; bottom: 10px; right: 10px; }
    30% {top: 15px; left: 15px; bottom: 15px; right: 15px; }
    40% {top: 20px; left: 20px; bottom: 20px; right: 20px; }
    50% {top: 25px; left: 25px; bottom: 25px; right: 25px; }
    60% {top: 30px; left: 30px; bottom: 30px; right: 30px; }
    70% {top: 40px; left: 40px; bottom: 40px; right: 40px; }
    80% {top: 50px; left: 50px; bottom: 50px; right: 50px; }
    90% {top: 60px; left: 60px; bottom: 60px; right: 60px; }
    100% {top: 70px; left: 70px; bottom: 70px; right: 70px; }
}

@keyframes  welcome_visitor {
    visibility: visible;
    10% {top: 5px; left: 5px; bottom: 5px; right: 5px; }
    20% {top: 10px; left: 10px; bottom: 10px; right: 10px; }
    30% {top: 15px; left: 15px; bottom: 15px; right: 15px; }
    40% {top: 20px; left: 20px; bottom: 20px; right: 20px; }
    50% {top: 25px; left: 25px; bottom: 25px; right: 25px; }
    60% {top: 30px; left: 30px; bottom: 30px; right: 30px; }
    70% {top: 40px; left: 40px; bottom: 40px; right: 40px; }
    80% {top: 50px; left: 50px; bottom: 50px; right: 50px; }
    90% {top: 60px; left: 60px; bottom: 60px; right: 60px; }
    100% {top: 70px; left: 70px; bottom: 70px; right: 70px; }
}

^这是HTML页面中使用的图像。

【问题讨论】：

为什么不把它放在一个 div 里面，把它放在 div 的 x、y 轴上居中，然后改变图像大小。要获得动画效果，请使用transition: 0.5s; // or something like that
但是转换需要一个人将鼠标悬停（或任何其他动作）在元素上以执行更改，对吗？如果是动画，它应该自行启动，而无需悬停或要求访问者提供任何内容。

标签： html css animation

【解决方案1】：

这是一个包含两个关键因素的解决方案：

animation-fill-mode: forwards; 将保持动画的结束状态可见
需要width: 0; 来定义动画的起点

img {
  width: 0;
  animation: scaleUp linear 1s;
  animation-fill-mode: forwards;
}

@keyframes scaleUp {
  to { width: 307px; }
}

&lt;img src="http://i.stack.imgur.com/NVwzK.png"/&gt;

如果你真的想在帧之间强制增加 10%，你可以使用 steps() 来代替缓动函数，但是你的动画不会很流畅：

img {
  width: 0;
  animation: scaleUp steps(10) 1s;
  animation-fill-mode: forwards;
}

@keyframes scaleUp {
  to { width: 307px; }
}

&lt;img src="http://i.stack.imgur.com/NVwzK.png"/&gt;

【讨论】：

谢谢，第一个解决方案奏效了。实际上，我有自己创建平滑动画的想法，但不知道如何做到这一点（这方面的初学者）。哦，我能知道你为什么选择 307px 作为宽度值吗？就像它可以是 300 或 400 之类的任何数字，但为什么要特别指定 307？
另外为什么我的动画不工作？我输入的关键帧定位值（上、左、下、右）是否有问题？请指出代码中的错误，导致我的动画没有按预期工作。这行得通吗？：@-webkit-keyframes enlargeImg { from {top: 0px; left: 0px; bottom: 0px; right: 0px;} to {top: 70px; left: 70px; bottom: 70px; right: 70px; } } @keyframes enlargeImg { from {top: 0px; left: 0px; bottom: 0px; right: 0px;} to { top: 70px; left: 70px; bottom: 70px; right: 70px; }
307px 是该图像的原始宽度。您的动画可能无法正常工作，因为您的 img 及其父级需要将 position 设置为不是 static 的内容。