CSS 动画在 H1 中插入单词

Question

嗨，我有一种情况，我需要在段落中一段时间​​后显示带有过渡的单词

例如我有一个:

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

我需要更多的文本以一种“淡入淡出”的方式出现，而左侧和侧面文本向两侧移动一点，就像这样的效果:

example

我一直在努力(并且一直在努力)的是在 .more 之前使用另一个带有类间隔符的 span 标签

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

这是绝对定位并使用从宽度 0 到宽度 70px 的过渡 并且在除 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 中添加类 .visible 触发动画

我需要只使用 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>