CSS3 animation 2D animation basics

How has CSS3 changed my career trajectory

15 years ago: Java Development engineer, project Manager
- At that time, we didn’t pay much attention to the development of front-end technology. We mainly used HTML, CSS, Ajax, and Form and Table were basically enough. Later, we used #C
15 years later: Front-end development engineer
- Coincided with the H5 golden period of development, was startled to see a lot of H5 page find CSS can realize all kinds of dazzling effect (at first thought it was a Flash), have been deeply attracted, remember at the beginning in order to write an animation effects, wrote one night, when the effect is presented, the excited mood as if the love of sweet, I liked this, I want to write a poem…
- Therefore, resolutely abandon the original position and accumulation, from seeking a front-end small white position…
Without further ado, the body begins…

The transform of transform

Developer.mozilla.org/zh-CN/docs/…

Rotate, scale, tilt, or pan a given element. This is done by modifying the coordinates of the CSS visual formatting model
Support to change other CSS properties, such as width, background, etc., commonly used, it is recommended to set the element out of the document flow (postion), to prevent the overall redraw or rearrangement.

Note: The composition transforms are in right-to-left order

The transition transition

API

Developer.mozilla.org/zh-CN/docs/…
Transitions can define different transitions for an element as it switches between different states, such as a width of 100 to 300
- transition-propertyTransitive CSS properties such as width or all changes all

transition-durationTransition process time (seconds or milliseconds)

transition-timing-functionThe acceleration curve used to describe this transition (Bessel curve)

Cubic -bezier(,,,), we need to focus on the values of P1 and P2, whereThe X axisThe value range of is0 到 1, when the value exceeds the rangecubic-bezierWill fail;YThe value of is not specified, of course, it does not need to be too large

transition-delayTransition delay time

div {

    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
div:hover {
    width: 300px;
}
Copy the code

The small sample

The slide button

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

/* DAY STYLES*/

body{

background: #FFF;

}

.the-container{

position: absolute;

width: 500px;

height: 350px;

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.c-window{

position: relative;

width: 235px;

height: 235px;

margin: 0 auto;

border-radius: 50%;

border: 8px solid #34A87C;

background: #DDDDDD;

box-shadow: 0px 0px 5px rgba(0.0.0.0.25) inset;

overflow: hidden;

transition: all .5s linear;

-webkit-transition: all .5s linear;

}

.c-window .the-sun{

display: block;

position:relative;

top: 18px;

height: 40px; width: 40px;

background: #FFE067;

border-radius: 50%;

margin: 0 auto;

left: 30px;

}

.c-window .the-moon{

position: relative;

height: 24px; width: 24px;

background: #EEE;

border-radius: 50%;

display:none;

}

.c-window .the-fox{

position: absolute;

bottom: -20px;

height: 140px;

width: 135px;

margin: 0 50px;

background: #E86A47;

transition: bottom 1s;

-webkit-transition: bottom .15s ease-in-out;

}

.c-window .the-fox:before{

width: 0;

height: 0;

border-left: 0px solid transparent;

border-right: 60px solid transparent;

border-bottom: 30px solid #E86A47;

top: -25px;

left: 0;

position: absolute;

content: "";

}

.c-window .the-fox:after{

width: 0;

height: 0;

border-right: 0px solid transparent;

border-left: 60px solid transparent;

border-bottom: 30px solid #E86A47;

top: -30px;

right: 0;

position: absolute;

content: "";

}

.c-window .the-fox:hover{

bottom: -30px;

}

.c-window .the-fox .eyes{

display: block;

position: absolute;

background: #FFFFFF;

height: 15px; width: 15px;

border-radius: 50%;

bottom: 90px;

-webkit-transition: all .15s linear;

}

.c-window .the-fox:hover .eyes{

height: 2px;

bottom: 97px;

}

.c-window .the-fox .eyes.left{

left: 30px;

}

.c-window .the-fox .eyes.right{

right: 30px;

}

.c-window .the-fox .nose{

display: block;

position: relative;

background: # 333;

height: 12px; width: 12px;

border-radius: 100%;

margin: 0 auto;

top: 50px;

}

.c-window .the-fox .white-part{

display: block;

position: relative;

width: 0px;

height: 0px;

top: 55px;

border-style: solid;

border-width: 60px 70px 0 65px;

border-color: #ffffff transparent transparent transparent;

}

input[type=checkbox]{

position: absolute;

visibility: hidden;

}

input#toggle[type=checkbox]{

display:none;

}

label {

position: absolute;

height: 40px;

width: 120px;

display: block;

top: 0px; bottom: 0; right: 0; left:0;

z-index: 9999;

cursor: pointer;

margin: 0 auto;

}

.switch {

position: relative;

border-radius: 25px;

background: #34A87C;

box-shadow: inset 0 0 10px # 888888;

-webkit-box-shadow: inset 0 0 10px rgba(0.0.0.0.25);

height: 40px;

width: 100px;

margin: 0 auto 30px;

}

.switch .button{

display: block;

position: absolute;

border-top: 1px solid #FFF;

border-bottom: 1px solid #AAA;

border-radius: 50%;

background: #48E8AA;

height: 32px;

width: 32px;

top: 4px;

left: 4px;

box-shadow: 0 0 2px rgba(0.0.0.0.25)}.switch .button .b-inside{

display: block;

position: absolute;

border: 1px solid # 888;

border-radius: 100%;

background: #FFE067;

height: 15px;

width: 15px;

top: 7px;

left: 7px;

box-shadow: 0 0 2px rgba(0.0.0.0.25)}.day-night-cont {

display: block;

position: absolute;

width: 180px;

margin: 0 auto;

left: 0; right: 0; top: 0; bottom:0;

height: 40px;

top: 0px;

}

.day-night-cont .the-sun{

display: block;

position: absolute;

left: 10px;

top: 10px;

height: 20px;

width: 20px;

border-radius: 50%;

background: #FFE067;

box-shadow: 0px 0px 10px #FFC41D;

}

.day-night-cont .the-moon {

position: absolute;

right: 8px;

top: 10px;

height: 20px;

width: 20px;

border-radius: 50%;

background: #DDD;

box-shadow: 0px 0px 50px #CCC;

}

.day-night-cont .the-moon .moon-inside{

display: block;

position: absolute;

left: 8px;

height: 20px;

width: 20px;

border-radius: 100%;

background: #fff;

}

/* TOGGLE */

.switch .button {

transition: left .25s ease-in-out;

-webkit-transition: left .25s ease-in-out;

}

input[type=checkbox]:checked ~ .switch .button {

left: 64px;

}

/* NIGHT ANIMATION */

input[type=checkbox]:checked ~ .c-window {

background: # 222222;

}

input[type=checkbox]:checked ~ .c-window .the-sun{ display: none; }

input[type=checkbox]:checked ~ .c-window .the-moon{

display: block;

top: 40px;

left: 60px;

}

input[type=checkbox]:checked ~ .c-window .the-fox{

background: #C74628;

}

input[type=checkbox]:checked ~ .c-window .the-fox:before{

width: 0;

height: 0;

border-left: 0px solid transparent;

border-right: 60px solid transparent;

border-bottom: 30px solid #C74628;

top: -30px;

left: 0;

position: absolute;

content: "";

}

input[type=checkbox]:checked ~ .c-window .the-fox:after{

width: 0;

height: 0;

border-right: 0px solid transparent;

border-left: 60px solid transparent;

border-bottom: 30px solid #C74628;

top: -30px;

right: 0;

position: absolute;

content: "";

}

input[type=checkbox]:checked ~ .c-window .the-fox .eyes{

height: 2px;

bottom: 90px;

}

input[type=checkbox]:checked ~ .c-window .the-fox:hover .eyes{

height: 15px;

bottom: 85px;

}

</style>

</head>

<body>

<div class="the-container">

<input type="checkbox" id="toggle"/>

<label for="toggle"></label>

<div class="day-night-cont">

<span class="the-sun"></span>

<div class="the-moon"><span class="moon-inside"></span></div>

</div>

<div class="switch">

<div class="button">

<div class="b-inside"></div>

</div>

</div>

<div class="c-window">

<span class="the-sun"></span>

<span class="the-moon"></span>

<div class="the-fox">

<div class="fox-face">

<section class="eyes left"></section>

<section class="eyes right"></section>

<span class="nose"></span>

<div class="white-part"><span class="mouth"></span></div>

</div>

</div>

</div>

</div>

</body>

</html>

Copy the code

Edge effect

<html>

<head>

<meta charset="utf-8">

<title>Border - width effect</title>

<style type="text/css">

body {

background-color: #eaf0f2;

}

.paper-flip {

position: relative;

width: 500px;

height: 300px;

margin: 100px auto 0;

}

.share-layer {

position: absolute;

left: 0;

top: 0;

width: 500px;

height: 300px;

background-color: #fff;

box-shadow: 0 2px 3px rgba(0.0.0.0.1);

}

.btn-wrap {

pointer-events: none;

opacity: 0;

text-align: center;

margin-top: 140px;

text-align: center;

}

.btn {

padding: 10px;

border-radius: 2px;

color: #fff;

display: inline-block;

}

.btn-facebook {

background-color: #3b5998;

}

.btn-twitter {

background-color: #00aced;

margin: 0 20px;

}

.btn-google {

background-color: #d34836;

}

.btn-close {

pointer-events: none;

position: absolute;

right: 15px;

top: 10px;

color: rgba(0.0.0.0.3);

font-size: 20px;

z-index: 11;

opacity: 0;

cursor: default;

}

.paper-flip.folded .btn-close {

-webkit-transition: 0.4 s;

transition: 0.4 s;

-webkit-transition-delay: 0.6 s;

transition-delay: 0.6 s;

opacity:1;

cursor: pointer;

pointer-events: initial;

}

.paper-flip.folded .btn-wrap{

opacity: 1;

-webkit-transition: all 0.4 s;

-o-transition: all 0.4 s;

transition: all 0.4 s;

-webkit-transition-delay: 0.6 s;

-o-transition-delay: 0.6 s;

transition-delay: 0.6 s;

pointer-events: initial;

}

.paper-flip.folded .share-layer {

z-index: 1;

-webkit-transition: all 0.1 s;

-o-transition: all 0.1 s;

transition: all 0.1 s;

-webkit-transition-delay: 0.4 s;

-o-transition-delay: 0.4 s;

transition-delay: 0.4 s;

}

/*image-layer*/

.image-layer {

width: 500px;

height: 300px;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

}

.image-layer img {

width: 500px;

cursor: pointer;

}

.image-layer:before {

content: ' ';

position: absolute;

top: 0;

right: 0;

border-style: solid;

border-width: 0;

border-color: rgba(0.0.0.0.2) #fff;

border-radius: 0 0 0 4px;

box-shadow: 0 1px 1px rgba(0.0.0.0.3), -1px 1px 1px rgba(0.0.0.0.2);

-webkit-transition: all 0.4 s ease-out;

transition:all 0.4 s ease-out;

}

.image-layer:hover:before{

border-right-width:80px;

border-bottom-width:80px;

}

.paper-flip.folded .image-layer:before{

border-right-width:1000px;

border-bottom-width:600px;

}

</style>

</head>

<body>

<div class="paper-flip" id="paper-flip">

<div class="share-layer">

<div class="btn-wrap">

<a class="btn btn-facebook">FaceBook</a>

<a class="btn btn-twitter">Twitter</a>

<a class="btn btn-google">Google +</a>

</div>

<span class="btn-close">x</span>

</div>

<div class="image-layer" id="image-layer">

<img src="images/table.jpg">

</div>

</div>

<script type="text/javascript">

document.getElementById('paper-flip').addEventListener("click".function(e){

if(e.target.className=="btn-close") {this.className = "paper-flip";

} else {

this.className = "paper-flip folded"; }});</script>

</body>

</html>

Copy the code

Ghost button

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body {

background: # 333;

}

.button {

display: block;

width: 180px;

height: 50px;

border: 2px solid rgba(255.255.255.0.8);

line-height: 50px;

padding-left: 20px;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

-moz-box-sizing: border-box;

margin: 0 auto;

font-weight: bold;

font-size: 18px;

text-decoration: none;

text-transform: uppercase;

font-family: Arial;

color: #2dcb70;

background: url(./images/allow.png) no-repeat 130px center;

-moz-transition: ease 0.4 s;

-o-transition: ease 0.4 s;

-webkit-transition: ease 0.4 s;

transition: ease 0.4 s;

position: relative;

}

.button:hover {

border: 2px solid #fff;

background-position: 140px center;

}

.button .line {

position: absolute;

background: none;

-moz-transition: ease 0.4 s;

-o-transition: ease 0.4 s;

-webkit-transition: ease 0.4 s;

transition: ease 0.4 s;

}

.button:hover .line {

background: #fff;

}

.button .line-top {

width: 0px;

height: 2px;

left: -110%;

top: -2px;

}

.button:hover .line-top {

width: 100%;

left: -2px;

}

.button .line-right {

width: 2px;

height: 0px;

right: -2px;

top: -110%;

}

.button:hover .line-right {

height: 100%;

top: -2px;

}

.button .line-bottom {

width: 2px;

height: 0px;

left: -2px;

bottom: -110%;

}

.button:hover .line-bottom {

height: 100%;

bottom: -2px;

}

.button .line-left {

width: 0px;

height: 2px;

right: -110%;

bottom: -2px;

}

.button:hover .line-left {

width: 100%;

right: -2px;

}

</style>

</head>

<body>

<div class="button" style="margin-top: 50px;">

<span class="line line-top"></span>

<span class="line line-right"></span>

<span class="line line-bottom"></span>

<span class="line line-left"></span>

Play

</div>

</body>

</html>
Copy the code

Animation animation

API

With the transition difference
- Transition is a one-time animation, and the animation controls the number of animations
- Transition is A transition from A to B, and there’s nothing you can do about it, like what if I want a-B-C?
Developer.mozilla.org/zh-CN/docs/…
Animation Specifies one or more groups of animations separated by commas
- animation-name: The name of the animation, representing an animation created by@keyframesDefines the animation sequence

animation-duration: Animation time (seconds or milliseconds)

animation-timing-functionTransition is the time property that controls state changes (between every two key frames, not the entire animation),More keyframe animation (step-start, step-edn)

Animation-delay: animation delay start (s). Negative values are allowed
- Default 0: execute animation immediately

Positive: The animation starts after the specified time delay

Negative: executes immediately, but jumps to animation after the specified time

animation-iteration-count: Defines the number of times an animation can be played. Infinite means an infinite loop

Animation-direction: defines whether the animation should be played forward, backward or in alternating cycles, normal/alternate/reverse, assuming animation A -> B
- Normal: Each animation starts from the initial state A, A -> B

Reverse: Each animation starts from the final state B, B -> A
- www.jc2182.com/runcode.htm…

Alternate: Every animation from A -> B -> A alternate animation
- www.w3school.com.cn/tiy/c.asp?f…

Animation-fill-mode: Sets how the CSS animation applies styles to its target before and after execution
- None: Returns to the state before the animation started when the animation ends

Forwards: Animations stay at the end

Backwards: Animation back to frame 1

Both: Forwards and backwards rules are applied in rotation according to Animation-direction

animation-play-state: defines whether an animation is running or paused, running/paused

Keyframses animation sequence
- from {} to {}

x1%, x2% {} x3% {}

The small sample

Based on the animation

.box {

width: 200px;

height: 100px;

background: red;

animation-delay: 5s;

margin: 10px;

}

.a1 {

/* Animation name per animation 2s constant delay 2s file-mode*/

-webkit-animation: boxan 2s linear 2s 2 none;

}

.a2 {

-webkit-animation: boxan 2s linear 2s 2 forwards;

}

.a3 {

-webkit-animation: boxan 2s linear 2s 2 backwards;

}

.a4 {

-webkit-animation: boxan 2s linear 2s 2 alternate;

}

.a5 {

-webkit-animation: boxan 2s linear 2s 2 reverse;

}

@-webkit-keyframes boxan {

0% {

-webkit-transform: translateX(0);

background: yellow;

}

50% {

-webkit-transform: translateX(40px);

}

100% {

-webkit-transform: translateX(100px);

background: blue; }}Copy the code

animation-delay

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

* {

margin: 0;

padding: 0;

}

body {

background: # 000;

}

.cor {

width: 50px;

height: 50px;

margin: 100px auto;

border: 8px solid rgba(255.255.255.2);

border-left-color: #fff;

border-radius: 50%;

;

-webkit-animation: load 1.1 s infinite linear;

}

@-webkit-keyframes load {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg); }}</style>

</head>

<body>

<div class="cor"></div>

</body>

</html>
Copy the code

Set the color of the border

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

* {

margin: 0;

padding: 0;

}

body {

background: # 000;

}

.cor {

width: 50px;

height: 50px;

margin: 100px auto;

border: 8px solid rgba(255.255.255.2);

border-left-color: #fff;

border-radius: 50%;

;

-webkit-animation: load 1.1 s infinite linear;

}

@-webkit-keyframes load {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg); }}</style>

</head>

<body>

<div class="cor"></div>

</body>

</html>

Copy the code

loadingExp

<div class="loader"><span></span><span></span><span></span></div>

.loader {

text-align: center;

}

.loader span {

display: inline-block;

vertical-align: middle;

width: 10px;

height: 10px;

margin: 50px auto;

border-radius: 50%;

background: black;

animation: loader .9s infinite alternate;

-webkit-animation: loader .9s infinite alternate;

-moz-animation: loader .9s infinite alternate;

}

.loader span:nth-of-type(2) {

animation-delay:.3s;

-webkit-animation-delay:.3s;

-moz-animation-delay:.3s;

}

.loader span:nth-of-type(3) {

animation-delay:.6s;

-webkit-animation-delay:.6s;

-moz-animation-delay:.6s;

}

@keyframes loader {

0% {

width: 10px;

height: 10px;

opacity:.9;

transform: translateY(0);

}

100% {

width: 24px;

height: 24px;

opacity:.1;

transform: translateY(-21px); }}Copy the code

Shake shake

<div class="dt attack"></div>

.dt{background:pink;width:150px;height:200px;margin:100pxauto; }.attack{

animation: shake 1s infinite;

}

@keyframes shake{

0%{transform:translateY(0); }7.5%{transform:translateY(-20px) rotate(-10deg); }15%{transform:translateY(-20px)}

22.5%{transform:translateY(-20px) rotate(10deg); }30%{transform:translateY(-20px) rotate(-3deg); }50%{transform:translateY(0);}

}
Copy the code

The resources

Github.com/xfz1987/css…
animate.style/
elrumordelaluz.github.io/csshake/
techbrood.com/

How has CSS3 changed my career trajectory

The transform of transform

The transition transition

API

The small sample

The slide button

Edge effect

Ghost button

Animation animation

API

The small sample

Based on the animation

animation-delay

Set the color of the border

loadingExp

Shake shake

The resources

Related Posts

Apollo Server is used to build the GraphQL Server and client

Environment variables are related in vUE projects

Understanding the use of PNPM