CSS 动画在 H1 中插入单词

Question

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

例如我有一个：

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

我需要更多的文字以 "fade" 的形式出现，而左侧和侧面的文字稍微向两边移动，就像这样的效果：

我一直在努力（并且正在努力）的是在 .more

之前使用另一个带有 class 间隔符的跨度标签

<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; }

添加 class 动画被触发。在 Javascript

中可见

我只需要使用 css

即可实现

Answer 1

您需要为此使用关键帧。我做了一个快速测试： http://jsbin.com/pubicabiku/1 。您需要调整 duration 和 position，但您可以掌握要点。

关于关键帧的更多信息：http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

更新:

为了流畅的动画效果，您可以使用百分比。 from和to代表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>

Answer 2

您可以使用 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>

CSS 动画在 H1 中插入单词

CSS animations insert word within an H1

css

animation

css-transitions