This post is from Animation Design & Button Effects at Xintan blog. More posts are posted on Github

Welcome to exchange and Star

The special effects in

Sliding box:

Jelly:

Pulse:

Flash:

Bubble:

Sliding box effects

rendering

The principle of

Since the button element can use before/ After pseudo-elements, it is possible to implement a cover layer in a dynamic graph with the help of pseudo-elements.

To avoid backflow repainting, the slider moves vertically, so the scaleY attribute is used. For the direction of the animation, transform-Origin is needed to change the origin of the animation.

Code implementation

HTML:

<button>xin-tan.com</button>
Copy the code

CSS:

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #40a9ff;
  padding: 0.5 em 1em;
}

button::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fa541c;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.4 s ease-in-out;
}

button:hover {
  cursor: pointer;
}

button:hover::before {
  transform-origin: center top;
  transform: scaleY(1);
}
Copy the code

Jelly effects

rendering

Principle and Code

The jelly effect can be divided into five parts, so it cannot be realized simply by transition. Instead, animation is used. And the animation is triggered when the mouse moves in, so the animation should be declared in :hover.

button {
  z-index: 1;
  color: white;
  background: #40a9ff;
  outline: none;
  border: none;
  padding: 0.5 em 1em;
}

button:hover {
  cursor: pointer;
  animation: jelly 0.5 s;
}
Copy the code

Let’s start writing jelly Animation’s special effects. This animation can be broken down into four parts: “Initial => squeeze high => squish => return to initial state”. Squeeze and flatten are achieved by scale, with the following code:

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1); 33%} {transform: scale(0.9, 1.1); 66%} {transform: scale(1.1, 0.9); }}Copy the code

further

The above dynamic simulation is pretty good, if you change 4 parts into 5 parts: “Initial => squeeze height => squish => squeeze height => return to initial state”. There will be a visual effect of a spring, like the effect of hand pressing jelly:

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1); Were 25% and 75%} {transform: scale(0.9, 1.1); 50%} {transform: scale(1.1, 0.9); }}Copy the code

Pulse effects

rendering

Principle and Code

First, remove the button’s default style. Make sure that the z-index value of the button is greater than ::before to prevent dom elements from being overwritten by pseudo-elements.

button {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  padding: 0.5 em 1em;
  color: white;
  background-color: #1890ff;
}

button:hover {
  cursor: pointer;
}
Copy the code

All that is left is to set the pseudo-elements. Because pulse effects give people the feeling of “hollow out” magnification. Therefore, the change object is the border property. The effect of hollowing out is achieved through a transparent background.

button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 4px solid #1890ff;
  transform: scale(1);
  transform-origin: center;
}
Copy the code

The animation starts when the mouse moves in, and the color on the border changes to be lighter and smaller, and the transparency gradually becomes 0.

button:hover::before {
  transition: all 0.75 s ease-out;
  border: 1px solid#e6f7ff;
  transform: scale(1.25);
  opacity: 0;
}
Copy the code

⚠️ Transition and Transform are pseudo-elements placed in hover state to return the animation to its original state in an instant.

Flash effects

rendering

Principle and Code

In terms of implementation, it still relies on pseudo elements, and the flash effects pay more attention to color matching. In terms of animation, the core implementation is to use the rotate to achieve the “tilt” effect and the Translate3D to achieve the “flash” effect.

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: # 262626;
  padding: 0.5 em 1em;
  overflow: hidden;
  --shine-width: 1.25 em;
}

button::after {
  content: "";
  z-index: -1;
  position: absolute;
  background: # 595959;
  /* Core code: position step by step */
  top: -50%;
  left: 0%;
  bottom: -50%;
  width: 1.25 em;
  transform: translate3d(200%, 0, 0)rotate(35deg);
  / * * /
}

button:hover {
  cursor: pointer;
}

button:hover::after {
  transition: transform 0.5 s ease-in-out;
  transform: translate3d(500%, 0, 0) rotate(35deg);
}
Copy the code

In addition to avoiding redraw backflow, ⚠️ Translate3D enables GPU acceleration for higher performance. But previously, the translate attribute was used for convenience.

Bubble effects

rendering

Principle and Code

First, disable the default style of the button element and adjust the color scheme:

button {
  outline: none;
  border: none;
  cursor: pointer;
  color: white;
  position: relative;
  padding: 0.5 em 1em;
  background-color: #40a9ff;
}
Copy the code

Since a button’s pseudo-element hierarchy overwrites the button, the z-index property is set to prevent pseudo-elements from overwriting the display. After all, you only want to cover the background color, not the font. In the style above add:

button {
  z-index: 1;
  overflow: hidden;
}
Copy the code

The last thing to deal with is the variation effect of pseudo-elements. Effects spread from the center, so they should be centered.

For size changes, use the scale property again.

Since it is a circle, set border-radius to 50%.

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  transform-origin: center;
  transform: translate3d(50%, 50%, 0)scale(0, 0);
  transition: transform 0.45 s ease-in-out;
}

button:hover::before {
  transform: translate3d(50%, 50%, 0)scale(15, 15);
}
Copy the code

Change direction?

The bubble effect in the sample code spreads from the middle to the sides. What if you want to spread from the top left to the bottom right? As shown below:

The process is very simple, just need to change the initial position of the bubble.

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  /* Code to change positions */
  top: 0;
  left: 0;
  transform-origin: center;
  transform: scale3d(0, 0, 0);
  transition: transform 0.45 s ease-in-out;
  / * * * * * * * * * * * * * /
}

button:hover::before {
  transform: scale3d(15, 15, 15);
}
Copy the code

Refer to the link

  • Transform-origin: Changing the Origin of animation
  • Increase Your Site’s Performance with Hardware-Accelerated CSS
  • Css3 Variables

More articles

  • Animation design · Font effects
  • Animation design · Input box effects
  • Animation design · Button effects
  • Animation design ·Loader special effects · Foundation
  • Animation design ·Loader special effects · Advanced chapter