Home > Article > Web Front-end > Does css3 animation effect have deformation?

Does css3 animation effect have deformation?

WBOYOriginal: 2022-04-28 14:20:031523browse

The animation effect in css3 has deformation; you can use "animation: animation attribute @keyframes ..{..{transform: deformation attribute}}" to achieve deformation animation effect. The animation attribute is used to set animation style, transform Properties are used to set the deformation style.

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

Does the css3 animation effect have deformation?

css3 animation effect has deformation

Deformation can use the transform attribute in css. The transform attribute applies 2D to the element. or 3D conversion. This property allows us to rotate, scale, move or tilt the element.

You can use the animation attribute to set animation. This attribute is an abbreviated attribute that can be set:

##animation-name specifies the keyframe name that needs to be bound to the selector. .
animation-duration Specifies the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function specifies the speed curve of animation.
animation-delay Specifies the delay before the animation starts.
animation-iteration-count specifies the number of times the animation should play.
animation-direction specifies whether the animation should be played in reverse in turn.

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.div1{
  width:100px;
  height:100px;
  background:pink;
  margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
  100%{transform:rotate(180deg) scale(0.5,0.5);}
}
</style>
</head>
<body>
<div class="div1">这是一个旋转缩放的效果</div>
</body>
</html>

Output result:

Does css3 animation effect have deformation?

(Learning video sharing:

css video Tutorial)

The above is the detailed content of Does css3 animation effect have deformation?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 count function 选择器 transform animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the usage of select in css3Next article：What is the usage of select in css3

See more

Does css3 animation effect have deformation?

Does the css3 animation effect have deformation?

Related articles