1 year ago



NEW GENERATION CSS WEB ANIMATIONS API WHETHER YOU’RE ANIMATING IN CSS OR JAVASCRIPT, THEY WILL BOTH HARNESS THE POWER OF THE SAME UNDERLYING ENGINE There are so many methods out there when it comes to animating on the web, from the old days of Flash through to JavaScript with jQuery, .animate(), then CSS3 and SVG and the animate tag, birthing libraries like Velocity and GreenSock. The Web Animations API hopes to achieve a mixture of all of these libraries and tools by using the power and simplicity of CSS animations and the flexibility of JavaScript to interact with elements on the page, including SVG, leaving the browser to deal with performance. Basic usage of the API requires the use of ‘.animate’ inside of JavaScript. The ‘.animate’ call takes two parameters; an array of keyframes and the timing properties for the animation. If you’ve written CSS animation before this will look really familiar. element.animate([ { transform: ‘rotate(0)’ }, { transform: ‘rotate(360deg)’} ], { duration: 5000, iterations: Ininity, direction: ‘normal’, ill: ‘forwards’, delay: 100, easing: ‘linear’ }); The new API keeps the benefits gained from CSS, like hardware acceleration, and adds more tools such as variables, finer controls and playback controls. KEYFRAME EFFECTS The new KeyframeEfect property in JavaScript adds more power to the API, allowing for animations to be modular and easily reused. The property takes three parameters; an element, an array of keyframes and timing properties. All of these can be mixed into as many KeyframeEfect properties as you want. Above: A selection of the frames that make up the animation CREATE A SIMPLE ‘LIKE’ ANIMATION The animation we’ll be creating will consist of four keyframes, increasing and decreasing the scale and changing the colour of the SVG. We can also use JavaScript to retrieve the values of Custom Properties set in the CSS. Although this animation could be created in CSS we’ll be using JavaScript to familiarise ourselves with the Web Animations API. 01. HTML AND CSS SETUP The HTML and CSS is really simple. It’s just a button containing an SVG and some CSS to apply some basic styling including some Custom Properties. :root { --colour-inactive: #a4a4a4; --colour-active: #ff4848; } 02. GET OUR CUSTOM PROPERTIES IN JS By setting the colours we’re going use in the USE THE WEB ANIMATIONS API TO CREATE A SIMPLE SVG ANIMATION animation as Custom Properties, we can then pull them out in the JavaScript and use them in our animation. To do this we need to set them as variables in JavaScript. var getCustomProperties = window. getComputedStyle(document. querySelector(“html”)); var colourInactive = getCustomProperties.getPropertyValue(‘-- colour-inactive’); var colourActive = getCustomProperties.getPropertyValue(‘-- colour-active’); 03. SET THE KEYFRAMES Next we’ll create a variable containing the keyframes for our pop animation; we’ll do this using the transform: scale() property. By shrinking the element slightly first and then pushing it over the initial size and back down, we’re creating an animation that expresses joy and seems ‘happy’ when coupled with the animated colour change. var keyframesPop = [ { transform: ‘scale(1)’ }, { transform: ‘scale(0.8)’, ill: colourInactive }, { transform: ‘scale(1.2)’ }, { transform: ‘scale(1)’, ill: colourActive } ]; 04. SET UP THE TIMING PROPERTIES Now we have our variable containing our keyframes we need to create another variable containing our timing properties. The duration is set in milliseconds, the number of iterations, the fill (which controls what happens when the animation is finished) and the easing, which we will set in cubic-bezier to give us greater control over the easing. var timingPop = { duration: 750, iterations: 1, ill: ‘forwards’, easing: ‘cubic-bezier(.61,-0.4,.69,1.32)’ } 50 ________________________________________________________________ feature

new generation CSS 5 key propertieS .animate() The simplest way to create an animation is to call .animate() on an element. timeline The player timeline allows for the current time of an animation to be either written or read using .currentTime(), allowing multiple animations to be synced or staged. ControlS and Play-StateS Play-states can be detected and triggered using .pause(), .play(), .cancel() or .finish(), allowing animations to be user controlled or chained together. PlayBaCk rate A separate control for the speed of playback allows for fine-tuning an animation without changing the easing or duration properties using animation. playbackRate = .25. keyframe, grouP & SeQuenCe effeCtS These new properties provide a simple way to group keyframes, timing properties and animations into groups, which can be played in sequence. CrtiCal CSS: what & why? SPEED UP YOUR WEBSITE WITH CRITICAL CSS Critical CSS is a way of reducing the number of render blocking elements in order to render the page as quickly as possible. Render blocking is caused when the browser has to wait until all of the CSS files in the of the document have downloaded before rendering the page. This is so that the browser can accurately calculate the layout. So large CSS files can significantly slow down the page. Critical CSS is a way of optimising the critical rendering path or, to put it another way, prioritising the display of elements. This is achieved by inlining the styles for elements that will be seen first (the above-the-fold content) into a tag in the of the document. The remaining CSS is then loaded asynchronously into the page with JavaScript. There are a number of ways to achieve this: it can be done manually, or by using build tools such as Gulp and Grunt ( addyosmani/critical). eSSential reading • Critical Rendering Path This free, in-depth course from Google covers every aspect of web performance, covering exactly how the browser renders the page and how to optimise your code. • Understanding Critical CSS This article written by Dean Hume on Smashing is an in-depth look at Critical CSS, including tutorials to get you creating faster rendering pages in no time. 05. Play the animation on CliCk With both our keyframes and timing properties created as variables we now need to combine them into an animation when the button is clicked. To do this we find the button and heart in the page and then listen for the button being clicked, running the ‘.animate’ function and passing it to the two required parameters on the heart when clicked. var button = document.querySelector(‘. button’); var heart = document.querySelector(‘.heart’); button.addEventListener(‘click’, function(e) { heart.animate(keyframesPop, timingPop); }); 06. Polyfill and fallBaCk Due to limited browser support it’s recommended to use a polyfill to provide support for a few more modern browsers ( For browsers with no support we can provide a fallback. Inside the button click function we can add a class of is-active to the heart and then in CSS we can change the colour when this class is applied. heart.classList.add(‘is-active’); {ill: var(--colour-active);} BrowSer Support 36+ Browser support is currently limited to Chrome, Firefox and Opera but both Edge and Safari have the feature ‘Under Consideration’, so hopefully we’ll see it in the 33+ not-so-distant future. Under consideration Under consideration feature _________________________________________________________________ 51

Start Here! Learn JavaScript -
20 Best AngularJS Development Tools for Developers
Metro Revealed - Download Center - Microsoft
Click to edit Master title style - OSS Watch