CSS動畫插入H1

Question

喜之內的話，我有一個情況我需要一些時間後顯示一個段落

例如裏面有一個過渡詞我有一個：

<h2>Click here to find <span class="more">more</span> information </h2>

我需要的文字更出現了一種「變臉」，而左側和側面移動的文字有點兩側有點像這樣的效果：

example

我已經因子評分什麼（正在）使用帶班間隔跨度的另一個標籤中的更多

<h2>Click here to find <span class="spacer"></span><span class="more">more</span> information </h2> 

這是絕對定位的前面，並用從寬度0過渡到寬度70像素， 是，並期待細除了Safari瀏覽器每一個瀏覽器，因爲間隔始終可見

這裏是我的CSS代碼：

h2.sides-styled { left:0; margin: 0 auto; opacity:0; overflow: hidden; padding: 4px 0; position: absolute; right: 0; width: 774px; z-index: 1000; } 

而且跨度：

span.more { color:red; font-style: italic; left:365px; opacity:0; position: absolute; transition: visibility 2s; transition-delay: 3.3s; visibility: hidden; } 

span.more.visible { opacity: 1; visibility: visible; } 

span.spacer{ width:0; background: blue; -webkit-transition: width 2s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; -ms-transition: width 0.3s; transition: width 0.3s; transition-delay: 3.1s; -webkit-transition-delay: 3.1s; -moz-transition-delay: 3.1s; -o-transition-delay: 3.1s; -ms-transition-delay: 3.1s; } 

動畫被觸發添加類。可見在Javascript

我需要做到這一點只用CSS

Answer 1

可以使用CSS3過渡實現的效果：

function toggleVisible() { 
 
var heading = document.getElementsByTagName('h2')[0]; 
 
heading.classList.toggle('visible'); 
 
} 
 

 
var button = document.getElementsByTagName('button')[0]; 
 
button.addEventListener('click', toggleVisible, false);

h2 { 
 
font-size: 36px; 
 
text-align: center; 
 
} 
 

 
h2 span { 
 
display: inline-block; 
 
} 
 

 
h2 span:nth-of-type(1) { 
 
transform: translateX(42px); 
 
transition: transform 2s ease-in-out; 
 
} 
 

 
h2 span:nth-of-type(2) { 
 
opacity: 0; 
 
transition: opacity 2s ease-in-out 1s; 
 
} 
 

 
h2 span:nth-of-type(3) { 
 
transform: translateX(-42px); 
 
transition: transform 2s ease-in-out; 
 
} 
 

 
h2.visible span:nth-of-type(1) { 
 
transform: translateX(0); 
 
} 
 

 
h2.visible span:nth-of-type(2) { 
 
opacity: 1; 
 
} 
 

 
h2.visible span:nth-of-type(3) { 
 
transform: translateX(0); 
 
}

<h2><span>Click here to find</span> <span>more</span> <span>information</span></h2> 
 

 
<button type="button">Toggle visible</button>

Answer 2

您需要使用關鍵幀爲。我做了一個快速測試：http://jsbin.com/pubicabiku/1。 您需要調整持續時間和的位置，但您可以獲得要點。

有關關鍵幀更多信息：http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

更新：

對於平滑的動畫，你可以使用百分比。從和到表示0和100：

/* sleft */ 
@-webkit-keyframes sleft { 
    0% {left: 50px; } 
    60% {left: 0px;} 
    100% {left: 50px;} // initial state 
} 

要重複動畫X次：

animation-iterantion-count: X; 
-webkit-animation-iterantion-count: X; 

編輯：我貼的代碼，以防萬一：

CSS

#swap { 
    position:absolute; 
    color:chocolate; 
    -webkit-animation: swap 2s infinite; 
    animation: swap 2s infinite; 
} 

/* swap */ 
@-webkit-keyframes swap { 
    from {left: 150px; opacity:0;} 
    to {left: 190px; opacity:1;} 
} 

@keyframes swap { 
    from {left: 150px; opacity:0;} 
    to {left: 190px; opacity:1;} 
} 

#sleft { 
    position:absolute; 
    -webkit-animation: sleft 2.5s infinite; 
    animation: sleft 2.5s infinite; 
} 

/* sleft */ 
@-webkit-keyframes sleft { 
    from {left: 50px; } 
    to {left: 0px;} 
} 

@keyframes sleft { 
    from {left: 50px;} 
    to {left: 0px;} 
} 

#sright { 
    position:absolute; 
    -webkit-animation: sright 3s infinite; 
    animation: sright 3s infinite; 
} 

/* sright */ 
@-webkit-keyframes sright { 
    from {left: 200px; } 
    to {left: 270px;} 
} 

@keyframes sright { 
    from {left: 200px; } 
    to {left: 270px;} 
} 

HTML

<p id="sentence"> 
    <span id="sleft">We provide</span> 
    <span id="swap">code</span> 
    <span id="sright">for your business.</span> 
    </p>