preface

Today in the study of CSS animation, saw zhang Xinxu teacher’s CSS animation blog!! Feel benefit a lot, here the introduction copy to the ruthless, motivate and spur yourself!!Several properties related to CSS animation are:transition,transform,animation; They can be thought of as transitions, transformations and animations. Similar in meaning, but different in role. Just like SHE group, although there are three girls, all sing the same song, but there are responsible for the high pitch, and good at the bass, the specific work of the role is different.

  • The transition from point A to point B is a transform.
  • Transform is used in conjunction with transition, a distant relative.
  • An animation is a key frame, and then the key frame is given to the target animation.

Each usage has experience to share, you can look at it!

Transform: Transform: Transform

Transform means transform, and those of you who have used Photoshop should know the Ctrl+T free transform. Transform is this thing right here, stretching, squeezing, rotating, offsetting. See the following example code:

 #skew { transform: skew(35deg); }
 #scale { transform:scale(1.0.5); }
 #rotate { transform:rotate(360deg); }
 #translate { transform:translate(50px.50px); }
 #mix{transform:skew(20deg) scale(1.1.5) rotate(360deg) translate(10px.20px); }Copy the code

  1. The displacement of the translate Touch me preview
  transform: translateX(50px);
  transform: translateY(-50px);
  transform: translateZ(-200px);
  translate3d(x,y,z);
Copy the code

2. The zoom scale Touch me preview

xtransform: scaleX(1.5);
xtransform: scaleY(1.5);
transform: scale(1.5.0.5);
Copy the code

3. Rotate the rotateTouch me preview

  transform: rotateZ(45deg);
Copy the code

4. SkewTouch me preview

  transform: rotate3d(1.1.1.45deg);
Copy the code

(2) Try more

CSS3 transitionThe CSS attribute is used to smoothly change the CSS value. Whether it is a click event, a focus event, or a mouse hover, as long as the value changes, it is smooth, it is animation. As long as a whole station common class, you can easily achieve the animation effect of progressive enhancement, let’s see his firstgrammar:The transition modes areEase | linear | ease – in | ease – out | ease – in-out | cubic bezier – (), linear linear excessive, ease – in from slow to fast, ease – out from fast to slow, Ease -in-out from slow to fast to slow. To see how to use it, you should try his relative Transform!!CSS is a hands-on subject ！！！！

Transform and transition transform the red heart

Red Heart Enlarged (Transform version) preview

When the mouse pointer is placed over a red heart, the red heart becomes larger. The way to do the red heart is to make three squares and then rotate them to get the red heart. Then you need to write a hover event to the heart, so that the mouse can be triggered. So we’re using both transformations and transitions. And you can try to add some other attributes on your own,

(3) Animation should be tried more

As of November 2010, animations seem to work only in the core WebKit browser, which I demonstrated here on Jsbin.The syntax and usage of @keyframes are as follows:In @keyframes, write the keyframe, and then hang it on the tag that needs to be animated.The syntax for animation is as follows:@keyframes skew: Animation @keyframes skew: Animation @keyframes skew: AnimationWrite their names rightIf you write it wrong, you won’t be able to animate it.In fact, all the effects used in the animation are from transfromTilt, zoom in, zoom out, rotate, pan, and so on, and I’ve also written one in this waydemo.Touch me preview.

Actual combat (2) : Using animation to beat the red heart

– The red heart becomes bigger (animation version) Touch me preview

conclusion

The first time to learn CSS animation, contact with the two kinds of animation, there are inaccurate places, but also hope that brothers and sisters more corrections, can combine a wave, do a Tanabata gift to his girlfriend! Ao ah!

This blog reference [Zhang Xinxu teacher blog] (www.zhangxinxu.com/wordpress/2…