html - 如何在 html/css 中淡入淡出动画图像图标

Question

您好，我正在尝试复制此 Wix 网站左侧和右侧的火焰图标动画:如何将火焰图标定位到最右侧或最左侧，并使其具有淡入淡出的动画效果

http://jirungu2012.wix.com/firebrandoption2

这是htm代码

 <section id="ourfires" class="portfolio page-section add-top add-bottom">
    <div id="right">
    <img src="http://static.wixstatic.com/media/d57153_09c71d3fe10848c3a04b18f8d8a6c2b3.png_srz_p_487_587_75_22_0.50_1.20_0.00_png_srz" />
        <!-- inner-section : starts -->
        <section class="inner-section">

        <!-- container : starts -->
        <section class="container">

            <div class="row">
                <article class="col-md-12">
                    <h1 style="text-align:left;"><span class="animated" data-fx="bounceInRight">Our fire</span></h1>
                    <article id="article"><hr class="hr"></hr></article>
                      <div class="clearfix"></div>



                    <div id="mid">

                    <p class="promod-text dark-text">Our fire is all about <b>Big Brand Ideas</b> that not only have an <b>edge in the market</b> and make a difference in the <b>bottom line</b>,but ieas are: </p>



                            <p>
                                <ul id="navlist" class="promod-text dark-text" >
                                    <li>Locally relevant</li>
                                    <li>Creatively imagined and executed</li>
                                    <li>Internationally recognized</li>
                                </ul>
                          </p>
                          <br><br><br><br><br> 
                  </div>

                </article>
            </div   
    ></section>
        <!-- container : ends -->
        </section>
        <!-- inner-section : ends -->
    </div>
    </section>

CSS

#ourfires{

    background: url('../images/bg/03.jpg');
    background-color:#ffffff;


}

Answer 1

以下是我对您的问题的理解。

HTML:

<div id="left">
    <img src="img.jpg" />
</div>

<div id="right">
    <img src="img.jpg" />
</div>

CSS:

#left, #right {
    max-width: 100px;
    position: absolute;
    display: none;
}
img {
    max-width: 100%;
}
#left {
    left: 0;
    top: 40%;
}
#right {
    right: 0;
    top: 40%;
}

jQuery:

$(document).ready(function () {
    $("#left").add("#right").fadeIn();
});

FIDDLE here

编辑:我已经使用了您的代码并在此 BOOTPLY 中编译了所需的行为. 请看一下。