Shulou(Shulou.com)06/02 Report--

This article mainly shows you "css3 how to achieve the left translation vanishing effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve the left translation vanishing effect of css3" this article.

Methods: 1, use "animation: name time" statement to bind the element to the left translation vanishing animation; 2, use the "@ keyframes name {100% {transform:translateX (- translation distance); opacity:0;}}" statement to achieve the element left translation vanishing effect.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

In css, to achieve the effect of element disappearing by translating to the left, you can use the animation attribute and the @ keyframes rule.

The principle of creating animation is to gradually change one set of CSS styles into another. You can change this CSS style many times during the animation process.

Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which is equivalent to 0 and 100%. 0% is the start time of the animation and the end time of 100% of the animation. For optimal browser support, you should always define 0% and 100% selectors.

The transform property is also used to set the slide action of the picture. The transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.

The opacity attribute is also used to style the transparency of the element.

Examples are as follows:

Document .div1 {width:100px; height:100px; background:pink; margin:0 auto;animation:fadenum 5s;} @ keyframes fadenum {100% {transform:translateX (- 200px); opacity:0;}} this is a div that disappears by translating to the left.

Output result:

The above is all the contents of the article "how css3 translates and disappears to the left". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.