Question

这里相当新的网络开发者。所以我在我的wordpress网站上有一个CSS3过渡，在IE和Edge的每个浏览器中都可以正常工作。不确定该怎么做也因为我不能在我的Mac上轻松测试它。

以下是可能影响事物的片段。第一个是从页面开始。

.jumbotron #name {
    margin-left:-200em;
}

.jumbotron #line {
    margin-left:-80em;
}

.jumbotron #occupation1, .jumbotron #occupation2 {
    margin-left:-190em;
}



 @-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(42%, 0, 0);
    transform: translate3d(42%, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(42%, 0, 0);
    transform: translate3d(42%, 0, 0);
  }
}

@-webkit-keyframes slideInLeftLine {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(315%, 0, 0);
    transform: translate3d(315%, 0, 0);
  }
}

@keyframes slideInLeftLine {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(315%, 0, 0);
    transform: translate3d(315%, 0, 0);
  }
}

@-webkit-keyframes slideInLeft2 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(43%, 0, 0);
    transform: translate3d(43%, 0, 0);
  }
}

@keyframes slideInLeft2 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(43%, 0, 0);
    transform: translate3d(43%, 0, 0);
  }
}

@-webkit-keyframes slideInLeft3 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(45%, 0, 0);
    transform: translate3d(45%, 0, 0);
  }
}

@keyframes slideInLeft3 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(45%, 0, 0);
    transform: translate3d(45%, 0, 0);
  }
}

.slideInLeft3 {
  -webkit-animation-name: slideInLeft3;
  animation-name: slideInLeft3;
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

.slideInLeft2 {
  -webkit-animation-name: slideInLeft2;
  animation-name: slideInLeft2;
}

.slideInLeftLine {
  -webkit-animation-name: slideInLeftLine;
  animation-name: slideInLeftLine;
}
#name {
    opacity:1;
    animation: slideInLeft 2s 1;
  -webkit-animation: slideInLeft 2s 1;
  -moz-animation: slideInLeft 2s 1;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}
#line {
    opacity:1;
    animation: slideInLeftLine 2s 1;
    -webkit-animation: slideInLeftLine 2s 1;
    -moz-animation: slideInLeftLine 2s 1;
      -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
     animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;

}

#occupation2 {


        animation: slideInLeft3 2s 1;
  -webkit-animation: slideInLeft3 2s 1;
  -moz-animation: slideInLeft3 2s 1;
  -webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
    animation-delay: 5s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;


}

#occupation1 {

        animation: slideInLeft2 2s 1;
  -webkit-animation: slideInLeft2 2s 1;
  -moz-animation: slideInLeft2 2s 1;
  -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-delay: 3s;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;

}

真的只是

#line是我遇到麻烦的。这可能是因为边缘功能与边缘不同，即？我知道网站上的简历也没有在页面中显示中心。我把site放在你要查看它的子目录上。

Answer 1

对于初学者来说，一个主要问题是你的HTML。你有额外的匿名结束标签，即在jumbotron中额外关闭div和在col-md-4 col-md-offset-7中随机关闭p标签。我刚刚删除了col-md-4 divs

我也不知道你为什么要使用margin-left。我个人会使用左边缘废弃并在#jumbotron内的项目上使用绝对定位，并确保#jumbotron相对定位。你将不得不搞砸这些职位以获得你想要的东西，但这可以在IE中使用。

HTML：

<div class="jumbotron">
    <div id="name">
        <h2>Joseph Scalzo</h2>
    </div>
    <div id="line"></div>
    <h3 id="occupation1">Performer.</h3>
    <h3 id="occupation2">Sommelier.</h3>
</div>

<main role="main">
    <!-- section -->
    <section>
        <!-- article formerly with class bigboy -->
        <article id="post-2"  class="post-2 page type-page status-publish hentry">
            <div class="container" id="hide" style="height:0; width:0;">
                <figure>
                    <img src="http://joebiz.net/blog/wp-content/uploads/2015/09/jumbotron.jpg" alt="headshot1"/><br />
                </figure>
                <div class="col-md-4 col-md-offset-7">
                    <h2>Joseph Scalzo</h2>
                    <hr id="fixedLine">
                    <h3>Performer. Sommelier.</h3>
                </div>
            </div>
            <br class="clear">
        </article>
        <!-- /article -->
    </section>
    <!-- /section -->
</main>

的CSS：

.jumbotron {
    position: relative;
}

.jumbotron h2 {
    font-size:4em;
    font-family: 'Raleway', Tahoma, sans-serif;
    color:#f3e877;
}

.jumbotron h3 {
    font-family: 'Raleway', Tahoma, sans-serif;
    color:black;
}

.jumbotron #name {
    position: absolute;
    top: 100px;
    width: 375px;
}

.jumbotron #line {
    border-bottom: 1px solid #fff;
    height: 1px;
    position: absolute;
    top: 172px;
    left: -100%;
    width: 375px;
}

.jumbotron #occupation1 {
    position: absolute;
    top: 180px;
    left: -100%;
    width: 375px;
}
.jumbotron #occupation2 {
    position: absolute;
    top: 220px;
    left: -100%;
    width: 375px;
}
@-webkit-keyframes slideInLeft {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}

@keyframes slideInLeft {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}


@-webkit-keyframes slideInLeftLine {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}

@keyframes slideInLeftLine {
  from {
    left: -100%;
  }

  to {
    left: 60%;
  }
}

@-webkit-keyframes slideInLeft2 {
  from {
    left: -100%;
  }

  to {
    left: 68%;
  }
}


@keyframes slideInLeft2 {
  from {
    left: -100%;
  }

  to {
    left: 68%;
  }
}

@-webkit-keyframes slideInLeft3 {
  from {
    left: -100%;
  }

  to {
    left: 72%;
  }
}

@keyframes slideInLeft3 {
  from {
    left: -100%;
  }

  to {
    left: 72%;
  }
}

CSS3转换在Microsoft Edge（和IE）中无法很好地显示

1 个答案: