transition animation
property
transition-xxx
-duration: transition time
-property: transition-property backgroud Color height width
none | All | Property
-timing-Faction: Transitional way
lnear uniform default
ease dampen the movement of
ease-in ease-out acceleration deceleration
ease- in-out speed fast
-delay delay time
merged
transition: property duration timing-function delay
property delay time transition time motion
Transform transform
properties
translate (x, y) how many pixels the displacement
scale (x, y) is a constant multiple of the scale
in degrees 45deg 45 degrees from cassette rotation parameters rotate (deg)
disposed cartridge skew (x-ange, y- ange) tilt unit is deg 45deg ...
rotateX rotateY rotateZ setting three rotary
perspective: from the perspective picture perspective from rotating when setting
defaults to none no perspective
grammar transform: perspective (200px) rotateY (rotation angle)
do morph animation when
you need to set the initial value is not set to jump prone to side the bug
the Transform-style: Perspective by-3d box set to 3d rotation
backface-visibility: visible is set back box
is visible by default
hidden invisible
.box .back: text
transform-origin box defaults to the center point of rotation Center
50px 50px to box The above is the origin 50px 50px as a central point
animation Animation
Animation keyframe animation may play on their own
keyframe
@keyframes animation name {
0%} set {
100%} {set
}
attribute
animation-name: name of the animation
animation-duration: animation time
animation-delay: the delay time animation
animation -timing-function: animation in the form of
animation-iteration-count: animation views
n: several
infinite: infinite time
animation-direction: whether the motion reverse restore
alternate: reverse reducing
animation-play-state: the state of animation
pause: stop
running: movement
synthesis wording
animation: motion animation time the name of the number of time delay
Animation examples
windmill animation
animation: the name of the animation time for exercise frequency mode (infinite)
animating transform: rotate (360deg)
2. lodding Wait animation
animation: Title number of temporal motion animation mode (Infinite)
animating transform: translateY (y-axis the number of pixels shifted)
set the wait time for each animated element
3. Walking Animation
Animation
STEP (. 8) is not continuous down jumping
Weights
Weight value level
1.! important added value right after heavy style property is 000 10
Color: Red! Important
2. inline styles style = "", 000 weight value. 1
3. The ID selector # content weight value 100
4. Class Attribute classes and pseudo-weighted value of 10 selectors
5. tag selector pseudo-element selector a weight value is
6. universal selector (*) to the sub-selection (>) adjacent selector (+) fellow selector (~) weight value 0