Question

我的背景有过渡的图像。在后台过渡完成后，文本必须淡入。我使用了transition-delay，但它在mozilla中工作，而不是在chrome中。至于淡入效果，它适用于铬而不是莫兹拉。现在我想要的是延迟后淡入的文本。如何纠正我的代码来实现这一点？

CSS

.text2
{
    margin-top:10%;
    margin-left:0;
    padding-left:0;


    /*fade in effect*/
     transition-delay: 2s;
    -moz-transition-delay:2s;
    -o-transition-delay:2s;
    -webkit-transition-delay:2s;
     animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

#target {
    position: relative;
    left:0;
    background-image:url('../img/top-bg.jpg');background-repeat:no-repeat;
     width: 120%;

    background-size:cover;
     height: 600px;  
    background-position: 200px 50%;
  transition: background-position 2s ease-in-out;

}


#target.wide{
    left: -20%;
    padding-left: 30%;
   background-position: 0px 50%;

}

脚本

<script>

  $(document).ready(function () {

        $('#target').toggleClass("wide");

});

  </script>

HTML

    <div id="target">
        <div class="small-12 medium-11 large-11 columns text2">
                 Beyond Law,<br/>
                 The Spirit of Innovation is Our strenght.
                 </div>
    </div>


</div>

<div style="clear: both"></div>

链接：

http://vani.valse.com.my/beldon/index.php

EDITED

text2
{
    margin-top:10%;
    margin-left:0;
    padding-left:0;


    /*fade in effect*/
    **transition: opacity 0.5s ease-in;**
     animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */

   transition-delay: 2s;
    -moz-transition-delay:2s;
    -o-transition-delay:2s;
    -webkit-transition-delay:2s;
}

以粗体添加该行。它在mozilla中可以正常工作，但在chrome中，转换延迟不起作用。

Answer 1

我在动画之后添加了下面的行，如下所示，并使其在chrome中工作。

-webkit-animation-delay: 4s; /* Chrome, Safari, Opera */
  /*to make the text not visible untill the transition starts*/
   -webkit-opacity: 0;
   /*without this the text will disappear after the animation*/
    -webkit-animation-fill-mode: forwards;

所以它看起来应该是完整的

.text2
{
    margin-top:10%;
    margin-left:0;
    padding-left:0;


    /*fade in effect*/
     transition: opacity 0.5s ease-in;
    -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;

     animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
   -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */

     transition-delay: 4s;
    -moz-transition-delay:4s;
    -o-transition-delay:4s;
    -webkit-transition-delay:4s;

   -webkit-animation-delay: 4s; /* Chrome, Safari, Opera */
  /*to make the text not visible untill the transition starts*/
   -webkit-opacity: 0;
   /*without this the text will disappear after the animation*/
    -webkit-animation-fill-mode: forwards;

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

文本在后台转换完成后淡入

1 个答案: