Teach you step by step how to use css3 to add animation effects to text (with code)

In the previous article "Teach you step by step how to use css to add flame effects to text (detailed code explanation)", I introduced you how to use css to add flame effects to text. The following article will introduce to you how to use css3 to add animation effects to text. Let’s see how to do it together.

#It can be seen in this type of website that both text and pictures change with the specified time. The principle of the powerful primary key of CSS3 is very simple. It mainly uses the animation attribute in CSS to realize the animation effect of text for everyone to see.

Code steps

1. First use the html framework.

Create a new document and write code using <div class="animate box">. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;animate box&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div><p style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;text-indent:0;padding:0 0 0 0 ;background:rgb(255,255,255)">2. The general framework has been written, <code><div> tags. Next add text code to it. Put the code in <span>. You can write whatever you want in the text. I wrote "css3 to achieve simple text animation effect"

<div class="animate box">
<span>css3实现简单的文字动画效果</span>
</div>

ok, the html code is done

3. The core part of css3 implementation: CSS animation and font styles. The

animate attribute is used to bind the animation to the div element, measured in pixels. When the animate attribute is defined for an element, its child elements get the perspective effect, not the element itself. Let me show you how to write the code below. First, add the <style type="text/css"><style> between the head tags and then add the Code examples for font size, margins, layout (setting width and height on elements) of text entered in the style tag.

.animate {
  font-size: 40px;
  margin: 100px 0 0;
}
 
.animate span {
  display: inline-block;
}

4. Box box

The box box model refers to: intuitively laying out elements on a web page. Each box has a content area and optional surrounding margins, margins and frame. Let me show you how to write the code below. The method of adding <style type="text/css"><style> between the above head tags is the same as the style tag. Enter the color, opacity, offset of the text, code example.

.box span {
  color: #fff;
  opacity: 0;
  transform: translate(-150px, 0) scale(.5);
  animation: leftRight 1s forwards;
}

5, Add @keyframes to the boxanimation, because this is the div element that moves at a constant speed, code example.

@keyframes leftRight {
  40% {
    transform: translate(30px, 0) scale(.7);
    opacity: 1;
    color: #000;
  }
  60% {
    color: #fff;
  }
  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }

##ok, css is done

【End】

Recommended learning:

CSS3 video tutorial

The above is the detailed content of Teach you step by step how to use css3 to add animation effects to text (with code). For more information, please follow other related articles on the PHP Chinese website!