CSS Part 7 – CSS3 (3)

Time:2020-10-24

CSS Part 7 – CSS3 (3)

CSS3 3D conversion

You can do some operations in the three directions of XYZ

div
{
  transform: rotateY(130deg);
  -WebKit transform: rotatey (130Deg); / * Safari and chrome*/
  -moz-transform: rotateY(130deg);    /* Firefox */
}

CSS Part 7 - CSS3 (3)

In addition, scale translation can be carried out in three directions.

CSS3 transition

CSS3 transition is an important section in CSS3. Through CSS3, we can add effects to elements when they are transformed from one style to another without using flash animation or JavaScript.

How does it work?

CSS3 transitions are the effect of elements gradually changing from one style to another.

In order to achieve this, we must stipulate two contents

  • Specify which CSS property you want to add the effect to
  • The duration of the specified effect

Transition effect applied to the width attribute for 2 seconds:

div{
  transition: width 2s;
  -moz-transition: width 2s;    /* Firefox 4 */
  -WebKit transition: width 2S; / * Safari and chrome*/
  -o-transition: width 2s;    /* Opera */
}

If the default value is 0, there will be no transition effect.

Many changes

To add transition effects to multiple styles, add multiple attributes, separated by commas:

example
Add transition effects to width, height, and transition:

div{
  transition: width 2s, height 2s, transform 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  -o-transition: width 2s, height 2s,-o-transform 2s;
}

The transition attribute is a shorthand for the following attributes:

attribute describe
transition-property Specifies the name of the CSS property to which the transition applies.
transition-duration Defines the time taken for the transition effect. The default is 0.
transition-timing-function Specifies the time curve of the transition effect. The default is “ease”.
transition-delay Specifies when the transition effect begins (the time when the delay starts). The default is 0.

CSS3 animation

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many web pages.

CSS3 Animation:Animation: animation name animation time

  • The first step is to define the animation name and content
  • The second step is to determine the animation properties
@keyframes myfirst{
  from {background: red;}
  to {background: yellow;}
}

@keyframes myfirst1{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

div
{
  animation: myfirst 5s;
}

CSS3 animation properties
The following table lists the @ keyframes rule and all animation properties:

Animation | abbreviation of all animation attributes, except animation play state.

attribute describe
@keyframes Specify animation.
animation-name Specifies the name of the @ keyframes animation.
animation-duration Specifies the number of seconds or milliseconds the animation takes to complete a cycle. The default is 0.
animation-timing-function Specifies the speed curve of the animation. The default is “ease”.
animation-delay Specifies when the animation starts. The default is 0.
animation-iteration-count Specifies the number of times the animation is played. The default is 1.
animation-direction Specifies whether the animation plays backward in the next cycle. The default is “normal”.
animation-play-state Specifies whether the animation is running or pausing. The default is “running”.
animation-fill-mode Specifies the state of an object outside of animation time.

Abbreviation

div
{
  animation: myfirst 5s;
}

For example, we want to keep the animation in its final state

.box{
    animation: myfirst 5s forwards;
  }
/*In fact, it is the property value of animation fill mode*/

Explain the value of animation fill mode

value describe
none Do not change the default behavior.
forwards When the animation is complete, the last attribute value (defined in the last keyframe) is maintained.
backwards Applies the start attribute value (defined in the first keyframe) before the animation is displayed for a period of time specified by animation delay.
both Both forward and backward fill patterns are applied.

Attachment:
Recommend a commonly used CSS3 animation library, can basically complete the work of 90% commonly used animation! https://daneden.github.io/ani… (need to climb over the wall!)
More articles please pay attention to WeChat official account: study front-end seriously.

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]