How to implement font enlargement and reduction animation in css3-Front-end Q&A-php.cn

How to implement font enlargement and reduction animation in css3

青灯夜游

Release： 2022-03-15 15:41:41

Original

6375 people have browsed it

Implementation method: 1. Use the "@keyframes" rule and the "transform:scale (scale);" statement to create a font enlargement and reduction animation; 2. Use "font element {animation: animation name time infinite;} ” statement applies the scaling animation to the font element.

How to implement font enlargement and reduction animation in css3

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

In css, you can use animation attributes, "@keyframes" rules, transform: scale() to achieve font amplification Zoom out animation

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			/*css部分*/
			@keyframes scaleDraw {

				/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
				0% {
					transform: scale(1);/*开始为原始大小*/
				}

				25% {
					transform: scale(1.5);/*放大1.1倍*/
				}

				50% {
					transform: scale(1);
				}

				75% {
					transform: scale(1.5);
				}
			}

			.ballon {
				width: 150px;
				height: 200px;
				margin: 100px auto;
				-webkit-animation-name: scaleDraw;/*关键帧名称*/
				-webkit-animation-timing-function: ease-in-out;/*动画的速度曲线*/
				-webkit-animation-iteration-count: infinite;/*动画播放的次数*/
				-webkit-animation-duration: 5s;/*动画所花费的时间*/

				/*可以简写为*/
				/* animation: scaleDraw 5s ease-in-out infinite; */
				/* -webkit-animation: scaleDraw 5s ease-in-out infinite; */
			}
		</style>
	</head>

	<body>
		<div class="ballon">欢迎来到PHP中文网</div>
	</body>
</html>

Copy after login

How to implement font enlargement and reduction animation in css3

##Instructions:

animation(animation attribute)

PropertyDescriptionCSS@keyframesDefine an animation. The animation name defined by @keyframes is used by animation-name. 3animationComposite attribute. Retrieves or sets the animation effects applied to the object. 3animation-nameRetrieve or set the animation name applied to the object, which must be used in conjunction with the rule @keyframes, because the animation name is determined by @keyframes definition3animation-durationRetrieves or sets the duration of the object animation3animation-timing-functionRetrieves or sets the transition type of the object animation3animation-delayRetrieve or set the delay time of object animation3##animation-iteration-countanimation-directionanimation-play-state








Retrieve or set the loop of object animation Times	3
Retrieve or set whether the object animation moves in reverse direction in the loop	3
Retrieve or set the state of the object animation	3

@keyframes

is a rule of CSS3 that can be used to define the behavior of a period of CSS animation and create simple animations. @keyframes rules are composed of a set of encapsulated CSS style rules that describe how attribute values change over time.

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

Copy after login

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

Syntax:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}
/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Copy after login

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

(Learning video sharing:

css video tutorial

, web front-end)

The above is the detailed content of How to implement font enlargement and reduction animation in css3. For more information, please follow other related articles on the PHP Chinese website!