This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge.

preface

About [SSD series] : Some interesting content on the front end, aimed at 3-10 minutes, 500-1500 words, gain without being tired.

Today, from four examples, we walk into CSS Transition.

Source code and online demo address

Source address: four cases, CSS Transition source code

Online demo address :(compatible with mobile terminal)

  • Bessel curve motion
  • The progress bar
  • Snowflake effect
  • Shopping cart parabola effect

Case presentation

Built-in Bezier function motion effect

Results are as follows:

  • ease
  • linear
  • easy-in
  • easy-out
  • easy-in-out

Bezier curve motion – Demo address

The progress bar

Train of thought

  • Two divs, an outer and an inner
  • box-shadow
  • transition

Progress bar – Demo address

Snow or

Ideas:

  • N HTML nodes whose postion is Absolute
  • Transition random Bezier curves and animation time

Snowflake effect

Shopping cart parabola

The top and left attributes are linear, an easy-in Bezier time function

Shopping cart parabola effect

The Transition properties:

So let’s talk about the attributes of transition

attribute describe CSS
transition Shorthand for property, used to set four transition properties in a property. 3
transition-property Specifies the name of the CSS property to which the transition is applied. The default value is all. 3
transition-duration Define how long the transition effect takes. The default is 0. 3
transition-timing-function A time curve specifying the effect of the transition. The default is ease. 3
transition-delay Specifies when the transition effect begins. The default is 0 3

Two additional attributes:

  • transition-property

All: all properties. None: none. Certain CSS Properties can be animated and not all properties can be animated. For details, see Certain CSS Properties can be animated. Background-image, float, display, position,visibility.

Transition is a simple summary of the categories, of course relatively comprehensive or Certain CSS properties can be animated

Color: color background - color border - color outline - color position: the backround - position left right top bottom length: [1]max-height min-height max-width min-width height width [2]border-width margin padding outline-width outline-offset [3] word-wrap: break-word! Important; word-wrap: break-word! Important; Opacity visibility z-index font-weight zoom combination: text-shadow transform box-shadow clip Others: gradientCopy the code

  • Transition-timing -function Third-order Bezier curve, where only two control points are required. As for what a Bezier curve is, look at Bezier Curve literacy. A few simple ones are built in:

    1, ease: gradually slow, linear Bezier curve (0.25, 0.1, 0.25, 1.0) 2, Ease: uniform, linear Bezier curve (0.0, 0.0, 1.0, 1.0) 4, Ease-out: Decelerate, ease-out Bessel curve (0, 0, 0.58, 1.0) 5, Ease-in: Accelerated and then reduced, ease-in-out Bezier curve (0.42, 0, 0.58, 1.0)

    More can be obtained online here with Bezier.

    There is also a steps function, which you can refer to for further understanding of CSS transitions

Multivalue: When multiple attributes change simultaneously

There are still two general ways to write it. Note that transition-property does not have the same number of other properties.

/* Method 1 */
.demo{
    transition-property: width, height;
    transition-delay: 500ms;
    transition-timing-function: linear;
    transition-duration: 2000ms;
}
/* Method 2 */
.demo{
  transition: width 2000ms linear 500ms, height 2000ms linear 500ms
}

Copy the code

triggered

  • Pseudo-classes trigger

Hover, :focus, :active, etc

  • Media query triggering

@media

  • Javascript trigger

The Transition event

  • This event and the transitionEnd are mutually exclusive. Only one of these events occurs.
  • Transitionend transitionend event
  • Transitionrun Converts the event to be performed
  • Transitionstart The event at which the transition starts. Because the transition has a delay property, it does not actually start.
const transition = document.querySelector('.transition');

transition.addEventListener('transitioncancel'.() = > {
  console.log('Transition canceled');
});
Copy the code

The number of times the Transition event is triggered is the number of non-composite Transition properties, such as width, height, and so on. The interesting thing is that when hover gets to something, it starts to transform, and you leave before the transformation is over. The effect will be reversed. In the demo above, you’ll see.

Basic understanding of the attributes and events, is the basic further application, you can download the source code to see, the idea of how much coquetty, how much effect.

Write in the last

Do not forget the original intention, [SSD series], 3-5 minutes, 500-1000 words, something, but not tired, if you feel good, your praise is the biggest motivation for me to move forward.

The technical exchange group, please come here. Or add my wechat dirge-cloud and study together.

CSS Transitions Using CSS Transitions TransitionEventSection CSS Transitions – | Can I Use a deep understanding of CSS transition the transition