Html Css幻燈片向左線性運動

Question

嗨我想滑動一個div與一些線性過渡左。

但是沒有發生轉變。我究竟做錯了什麼？

$("#EnvironmentSelect").addClass("animateToLeft");

#EnvironmentSelect{ 
 
    position:absolute; 
 
    -webkit-transition: all 10s ease-in; 
 
    -moz-transition: all 10s ease-in; 
 
    -ms-transition: all 10s ease-in; 
 
    -o-transition: all 10s ease-in; 
 
    transition: all 10s ease-in; 
 
    } 
 
    .animateToLeft { 
 
    left: 60px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div id="EnvironmentSelect"> 
 
      <p class="Text">Lorem Ipsum:</p> 
 
      <div> 
 
       <p class="schoolEnvLabel EnvLabel"> 
 
        <img src="~/Content/Images/1.png" /> 
 
        1 
 
       </p> 
 
       <p class="homeEnvLabel EnvLabel"> 
 
        <img src="~/Content/Images/2.png" /> 
 
        2 
 
       </p> 
 
      </div> 
 
     </div>

Answer 1

您應該添加

#EnvironmentSelect { left: 0 } 

而且你應該使用更強大的選擇重寫第一個：

#EnvironmentSelect.animateToLeft { left: 60px } 

還可以使用 「襯墊」 的過渡模式如果你想要線性轉換

級

最終的CSS看起來應該是這樣

#EnvironmentSelect { 
 
left: 0; 
 
position:absolute; 
 
-webkit-transition: all 10s linear; 
 
-moz-transition: all 10s linear; 
 
-ms-transition: all 10s linear; 
 
-o-transition: all 10s linear; 
 
transition: all 10s linear; 
 
} 
 
#EnvironmentSelect.animateToLeft { 
 
left: 60px; 
 
}

Answer 2

嘗試使用下面的CSS代碼或鏈接。

JsFiddle Link

CSS代碼 -

#EnvironmentSelect { 
    position: absolute; 
} 

.animateToLeft { 
    left:60px; 
    transform: translateX(-60px); 
    -webkit-transition: all 10s ease; 
    -moz-transition: all 10s ease; 
    -ms-transition: all 10s ease; 
    -o-transition: all 10s ease; 
    transition: all 10s ease; 
} 

Answer 3

您可以簡單地使用CSS animation。

#EnvironmentSelect { 
 
    position: absolute; 
 
    left:60px; 
 
    animation:slide 5s; 
 
} 
 

 
@keyframes slide{ 
 
    0%{left:0;} 
 
    100%{left:60px;} 
 
}

<div id="EnvironmentSelect"> 
 
    <p class="Text">Lorem Ipsum:</p> 
 
    <div> 
 
    <p class="schoolEnvLabel EnvLabel"> 
 
     <img src="~/Content/Images/1.png" /> 1 
 
    </p> 
 
    <p class="homeEnvLabel EnvLabel"> 
 
     <img src="~/Content/Images/2.png" /> 2 
 
    </p> 
 
    </div> 
 
</div>

Answer 4

您必須添加 「左：0」 到你的基本對象的CSS。

這樣CSS將知道從哪裏開始動畫的起源。