CSS动画在H1中插入单词_Css_Animation_Css Transitions

CSS动画在H1中插入单词

css animation

CSS动画在H1中插入单词,css,animation,css-transitions,Css,Animation,Css Transitions,嗨，我有一种情况，我需要在一段时间后在一个段落中显示一个带过渡的单词例如，我有一个：单击此处查找更多信息我需要文本更多地以一种“淡入”的方式出现，而左侧和侧边文本稍微向两侧移动，有点像这样的效果：我想到（并且正在工作）的是在.more之前使用另一个带有类间隔符的span标记 <h2>Click here to find <span class="spacer"></span><span class="more">more</span

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

例如，我有一个：

单击此处查找更多信息

我需要文本更多地以一种“淡入”的方式出现，而左侧和侧边文本稍微向两侧移动，有点像这样的效果：

我想到（并且正在工作）的是在.more之前使用另一个带有类间隔符的span标记

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

跨度：

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来实现这一点，你需要使用关键帧。我做了一个快速测试：您需要调整持续时间和位置，但您可以了解要点

有关关键帧的详细信息：

更新：

对于平滑动画，可以使用百分比。从和到表示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>


我们提供
代码
为了你的生意。

您需要使用关键帧。我做了一个快速测试：您需要调整持续时间和位置，但您可以了解要点