CSS3 animation to achieve 3D countdown effect

How to use CSS3 animation first? Two steps.

1. Defining animation rules

   @keyframe animationName{ timeStamp{ attr1:value1; attr2:value2; . attrn,valuen; }}Copy the code

Description:

• AnimationName indicates the animationName;
• TimeStamp indicates the time point and can be from, to or 0-100%. From indicates 0 and to indicates 100%.
• Each point in time can specify multiple style attributes attr and the corresponding value value.

2. Element application animation

    elemSelector{  
        animation: animationName animationDuration;   
    }
   Copy the code

Description:

• ElemSelector indicates the element selector
• To execute an animation, specify at least the animationName animationName and animationDuration animationDuration
• Animation property is the short form of the following properties. The meanings of each property are described in the following table.

The attribute name	meaning
animation-name	@keyFrame The name of the animation
animation-duration	The animation duration must be specified in units such as s or ms. The default value is 0
animation-timing-function	The default value is ease. Other values include ease-in, ease-out, ease-in-out, Linear, step-start, step-end, Cubic bezier curve function, and steps
animation-delay	How long does the animation delay start? You need to specify the specified unit, such as S or ms. The default is 0
animation-iteration-count	Number of times an animation is played. Default is 1
animation-direction	The default value is Normal. Other values can be reverse, alternate, and alternate-reverse
animation-play-state	The playback state of the animation, running or paused, default is running, other values are paused
animation-fill-mode	Specifies whether to apply target state before and after animation execution. The default value is None. Other values include forwards, backwards, and both

The key point, a countdown effect is how to achieve, first look at the effect. Since it’s a compressed GIF, it looks fast.

The main code is explained below,

• HTML part

  <! <div id="number"></div> <! <button class="button"> </button> <! -- Used for final sound playback. --> <audio ></audio>Copy the code

• The CSS part

  */ #number {position: absolute; top: 50%; left: 50%; text-align: center; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } /* Bind animation */. Number -anim {-webkit-animation: animation_in 10s linear; -moz-animation: animation_in 10s linear; /* Animation: animation_in 10s linear; /* Animation: animation_in 10s linear; } /* Define the animation rules */ @keyframes animation_in {0 {} 10% {/* The animation length is 10 seconds, the font size is 100px, z direction is 300px away from the main screen */ font size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); /* Font-size: 300px; /* font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 20% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 21% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 30% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 31% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 40% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 41% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 50% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 51% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 60% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 61% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 70% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 71% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 80% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 81% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 90% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); } 91% { font-size: 300px; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 100% { font-size: 100px; -webkit-transform: translate3d(-50%, -50%, -300px); -moz-transform: translate3d(-50%, -50%, -300px); transform: translate3d(-50%, -50%, -300px); }}Copy the code

• JS part

  Window.onload = function() {num = 10; // counting = true; // Whether timer = null; // timer numberDiv = document.querySelector("#number"); audio = document.querySelector("audio"); button = document.querySelector(".button"); // Init (); Timer = setInterval(count, 1000); }Copy the code

  The initialization function is declared as follows,

  function init() { numberDiv.innerHTML = num; numberDiv.style.color = getRandomColor(); numberDiv.style.fontSize = "300px"; numberDiv.className = "number-anim"; button.addEventListener("click", function() { if (isCounting) { return; } isCounting = true; num = 10; numberDiv.innerHTML = num; numberDiv.style.color = getRandomColor(); numberDiv.style.fontSize = "300px"; Numberdiv.classname = null; numberDiv.className = null; numberDiv.className = null; setTimeout(function() { numberDiv.className = "number-anim"; timer = setInterval(count, 1000); }, 30); }, false); }Copy the code

  The reverse counting function is declared as follows,

  function count() { numberDiv.innerHTML = --num; numberDiv.style.color = getRandomColor(); if (num == 0) { clearInterval(timer); audio.src="./audio/readygo.mp3"; audio.play(); numberDiv.innerHTML = "Ready Go!" ; numberDiv.style.color = getRandomColor(); numberDiv.style.fontSize = "100px"; NumberDiv. Style. Opacity = 0.8; numberDiv.style.filter = "alpha(opacity=80)"; CompatibleFunc(numberDiv, "Transition", "opacity 1s"); isCounting = false; }}Copy the code

There is one area that needs special attention to avoid potholes in the future.

Unbinding and binding about animation styles.

Once the animation finishes executing, it is no longer active and needs to be rebound for it to take effect again. I tried four ways.

• The first is to unbind directly and then bind again.

    numberDiv.className = null;
    numberDiv.className = "number-anim";
  Copy the code

  The result is that the animation cannot be reactivated.

• The second is to use the classList attribute to unbind.

    numberDiv.classList.toggle("number-anim");
    numberDiv.classList.toggle("number-anim");
  Copy the code

  ClassList returns a list of class names and calls toggle. If the class name exists, it is removed and returns false. If the class name does not exist, it is added and returns true. But the result is still that the animation cannot be reactivated.

• The third is to turn on the timer.

  First unbind, then use the timer to cause the browser to re-render the page, re-bind. SetTimeout is just a way to get the browser to re-render the animation.

    numberDiv.className = null;
    setTimeout(function() {
        numberDiv.className = "number-anim";
    }, 30); 
  Copy the code

  Another way to rerender is described in mozilla’s official documentation,

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Tips
  Copy the code

  And when I apply it here, I write it as,

    numberDiv.className = null;
    window.requestAnimationFrame(function(){
        window.requestAnimationFrame(function(){
            numberDiv.className = "number-anim";
        });
    });
  Copy the code

• The fourth is through other re-rendering methods, such as color, content, and size changes.

    numberDiv.className = null;
  
    numberDiv.innerHTML = num;
    numberDiv.style.color = getRandomColor();   
    numberDiv.style.fontSize = "300px";
    
    numberDiv.className = "number-anim";
  Copy the code

  It turns out that IE and Microsoft Edge are supported, but FireFox and Chrome are not, but does that mean that Chrome and FireFox have optimized browser rendering?

In short, for the animation to reactivate, the browser needs to be triggered to rerender. Ok, attach the source link.

https://github.com/muzhidong/frontend-demo/tree/master/countdown
Copy the code