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

This article mainly explains "css3 how to achieve font zoom animation", the text explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css3 how to achieve font zoom animation" bar!

Implementation method: 1, use the "@ keyframes" rule and "transform:scale (scale);" statement to create font zoom animation; 2, use the "font element {animation: animation name time infinite;}" statement to apply the zoom animation to the font element.

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

In css, you can use the animation property, the "@ keyframes" rule, and transform: scale () to zoom in and out fonts.

Example:

/ * css part * / @ keyframes scaleDraw {/ * define keyframes. ScaleDrew is the Keyframe name that needs to be bound to the selector * / 0% {transform: scale (1) / * start with original size * /} 25% {transform: scale (1.5) / * magnify 1.1x * /} 50% {transform: scale (1) } 75% {transform: scale (1.5);}} .ballon {width: 150px Height: 200px; margin: 100px auto;-webkit-animation-name: scaleDraw;/* Keyframe name * /-webkit-animation-timing-function: ease-in-out / * Speed curve of animation * /-webkit-animation-iteration-count: the number of times infinite;/* animation is played * /-webkit-animation-duration: 5s / * time spent on animation * / / * can be abbreviated as * / / * animation: scaleDraw 5s ease-in-out infinite; * / / *-webkit-animation: scaleDraw 5s ease-in-out infinite * /} welcome to

Description:

Animation (Animation Properties)

The attribute description CSS@keyframes defines an animation, and the animation name defined by @ keyframes is used by animation-name. 3animation compound attribute. Retrieves or sets the animation effects applied by the object. 3animation-name retrieves or sets the animation name applied to the object, which must be used with the rule @ keyframes Because the animation name is defined by @ keyframes 3animation-duration retrieves or animates the duration of the object 3animation-timing-function retrieves or animates the transition type of the object 3animation-delay retrieves or animates the delay time of the object 3animation-iteration-count retrieves or animates the number of cycles 3animation-direction retrieves or animates the object whether the 3animation-play-state retrieves or animates the object in the loop

Keyframes is a rule of CSS3 that can be used to define the behavior of a cycle of CSS animation and to create simple animations.

The @ keyframes rule consists of a set of encapsulated CSS-style rules that describe how attribute values change over time.

@ keyframes animation-name {keyframes-selector {css-styles;}}

Keyframes-selector: defines the percentage of the animation, which is between 0 and 100 percent. An animation can contain many selectors.

Then, using different CSS animation attributes, you can control many different aspects of the animation, including the number of iterations in the animation, whether it alternates between the start and end values, and whether the animation should be run or paused. Animation can also delay its start time.

The @ keyframe rule consists of the keyword "@ keyframe", followed by an identifier of the animation name (which will be referenced by animation-name), followed by a set of style rules (separated by curly braces). The animation is then applied to the element by using the identifier as the value of the animation-name attribute.

Syntax:

/ * define animation * / @ keyframes animation name {/ * style rules * /} / * apply it to the element * / .element {animation-name: animation name (declared in @ keyframes); / * or use the animation shorthand attribute * / animation: animation name 1s.}

In curly braces, we need to define keyframes or voyages that specify the value of the attribute being animated at a specific point during the animation. This allows us to control the intermediate steps in the animation sequence.

Thank you for your reading, the above is the content of "css3 how to achieve font zoom in and out animation". After the study of this article, I believe you have a deeper understanding of how to achieve font zoom in and out animation in css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.