css3 animation and animation js

css3 animation

animation is a shorthand property for setting six animated properties.

animation-name regulations need to be bound to the selector keyframe name
animation-duration specified time it takes to complete the animation of
animation-timimg-function animation predetermined speed profile.
animation-delay specified delay before the start of the animation
animation-iteration-count specified number of times the animation should play
Whether the provisions of animation-direction should turn reverse play the animation

Note must provide animation-duration property, or long 0

animation-timing-function animation predetermined speed profile

liner animation from start to finish at the same speed
ease default speed to low speed, then speed up, slow down before the end of
ease-in animation at low speed start
ease-out animation at low end
ease-in-out animations at low speed start and end

Whether the provisions of animation-direction should turn reverse play the animation

noramal default. Animation should play normal
alternate animation should reverse rotation

http://js.jirengu.com/hupecativa/2/edit

transtion excessive property

By default all 0 ease 0

Attribute name list css transition-property provisions set transition effects name none css property has no effect all properties are obtained over-all effect of property definitions apply transition effects
transition-duration in milliseconds for a predetermined time or the number of seconds it takes excessive time required effect
transition-timing-function effects a predetermined speed speed profile
When over-defined transition-delay effect begins

transition-timing-function speed switching effect

cubic-bezier (n, n, n, n) own defined function value

https://jsbin.com/fejofoqeca/edit?html,output

js animation

Knowledge Point

1. The relative position shift

An element in the page for mobile, that continued to change their position relative page at a time will be able to display animation

About offset

The position property setting element
top, left offset property may be provided
offsetLeft, offsetTop offset property may be provided

The difference 2.obj.offsetwidth and obj.style.width

obj.offsetwidth attribute is read-only, can not be copied, the result is a pure digital
obj, offsetwidth premise using the style element tag inline style and width of the case attribute exists. Readable assignable

3.requestAnimationFrame (recommended)

window.requestAnimationFrame (callback) to accept the callback function. More fluent

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <style>
 9   #ball{
10     position:absolute;
11     left:0;
12     width:30px;
13     height:30px;
14     background:red;
15     border-radius:50%;
16   }
17 </style>
18<body>
 . 19      <div ID = "Ball"> </ div>
 20 is </ body>
 21 is    <Script>
 22 is      var offsetX = 300; // movement distance 
23 is  var moveOffset = 0; // this has moved a distance 
24  var STEP = 5; // each movement distance of 
25  
26 is  function move () {
 27      IF (moveOffset < offsetX) {
 28        the console.log (ball.style.left)
 29          ball.style.left = the parseInt (the getComputedStyle (Ball). left) + STEP + 'PX'
 30          moveOffset + = STEP
 31 is         requestAnimationFrame(move,5)
32     }
33 }
34 move()
35   </script>
36 </html>

Use setTimeout implement (not recommended) and off

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <style>
 9   #ball{
10     position:absolute;
11     left:0;
12     width:30px;
13     height:30px;
14     background:red;
15     border-radius:50%;
16   }
17 </style>
18<body>
 . 19      <div ID = "Ball"> </ div>
 20 is </ body>
 21 is    <Script>
 22 is  var offsetX = 300; // movement distance 
23 is  var moveOffset = 0; // this has moved a distance 
24  var STEP = 5; // each movement distance of 
25  
26 is  function move () {
 27      IF (moveOffset < offsetX) {
 28        the console.log (ball.style.left)
 29          ball.style.left = the parseInt (the getComputedStyle (Ball). left) + STEP + 'PX'
 30          moveOffset + = STEP
 31 is         setTimeout(move,5)
32     }
33 }
34 move()
35   </script>
36 </html>

css3 animation and animation js

Guess you like