无法将动画用于.png图像

时间：2016-06-24 16:24:41

标签： html css animation

我想在图像上实现动画，将图像放大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; }
}

"image: welcome.png"

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

1 个答案:

答案 0 :(得分：2)

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

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

    3. ＆＃13;
    ＆＃13; 
    img {
  width: 0;
  animation: scaleUp linear 1s;
  animation-fill-mode: forwards;
}

@keyframes scaleUp {
  to { width: 307px; }
}
    ＆＃13; 
    <img src="http://i.stack.imgur.com/NVwzK.png"/>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    如果你真的想在帧之间强制实施10％的增量，你可以使用steps()而不是缓动函数，但你的动画会不顺畅：

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

@keyframes scaleUp {
  to { width: 307px; }
}
    ＆＃13; 
    <img src="http://i.stack.imgur.com/NVwzK.png"/>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题