More and more websites are using animation, whether they are displayed in GIF, SVG, WebGL, video background or other forms. Appropriate use of animation can make a website more lively and interactive, adding an extra layer of feedback and experience for users.
In this tutorial I will introduce you to CSS animations; which have become more and more popular as browser support improves, CSS animations are very performant in doing some things. After covering the basics, we'll build a quick example: animating a rectangle turning into a circle.
See the demo here
@keyframes and animation Introduction
The main components of css animation: @keyframes, css rules for creating animations. Think of @keyframes as a timeline of animation steps. In @keyframes, you can define these steps, each with a different style statement.
The second step is to enable the CSS animation to run. You need to bind a selector to @keyframes. Based on these steps, all code declared by @keyframes will be parsed and the new style will be initialized.
The @keyframes
Here we will set the steps for animation. The properties of @keyframes are as follows:
The name of the selector (in this example is tutsFade) . Steps: 0%-100%; from (equal to 0%) and to (equal to 100%). CSS style: to be applied at each stage Style. Example:
@keyframes tutsFade {
0% {
opacity: 1 ;
}
100% {
opacity: 0 ;
}
}
or:
@keyframes tutsFade {
from {
opacity: 1 ;
}
to {
opacity: 0 ;
}
}
Abbreviation:
@keyframes tutsFade {
to {
opacity: 0 ;
}
}
The above code applies an opacity transition to the element, from opacity: 1 to opacity: 0. The effect achieved by the above three methods is the same.
The Animation
animation attributes:
animation-name: @keyframes name (in this case tutsFade). animation-duration: time interval, total length of animation from start to end. animation-timing-function: set animation speed (linear | ease | ease-in | ease-out | ease-in- out | cubic-bezier ). animation-delay: The delay before the animation starts. animation-iteration-count: How many times it will iterate during the animation. animation-direction: Change the direction of the loop, from start to end, end to start, or both. animation-fill-mode: Specify the style to be applied to the element when the animation ends (none | forwards | backwards | both ). For example:
.element {
animation-name: tutsFade;
animation-duration: 4 s;
animation-delay: 1 s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
abbreviated as:
.element {
animation: tutsFade 4 s 1 s linear infinite alternate;
}
The above code will create a blinking effect, 1 second animation delay, 4 second animation interval, alternating directions and infinite linear loop iteration.
Add browser prefix:
At work, we need to use browser-specific prefixes to ensure the best browser support. Standard prefix application:
Chrome & Safari: -webkit- Firefox: -moz- Opera: -o- Internet Explorer: -ms- 动画属性使用了浏览器前缀的形式：
.element {
-webkit-animation: tutsFade 4 s 1 s infinite linear alternate;
-moz-animation: tutsFade 4 s 1 s infinite linear alternate;
-ms-animation: tutsFade 4 s 1 s infinite linear alternate;
-o-animation: tutsFade 4 s 1 s infinite linear alternate;
animation: tutsFade 4 s 1 s infinite linear alternate;
}
@keyframes的前缀使用：
@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }
更多浏览器前缀： http://css3please.com/
多动画
使用逗号分割添加多动画。为tutsFade 元素添加回转，我们要声明一个额外的@keyframes然后绑定到元素上：
.element {
animation: tutsFade 4 s 1 s infinite linear alternate, tutsRotate 4 s 1 s infinite linear alternate;
}
@keyframes tutsFade {
to {
opacity: 0 ;
}
}
@keyframes tutsRotate {
to {
transform: rotate( 180 deg);
}
}
------------------------------------分割线--------------------------------------------------------------------
矩形变圆形实例
这个例子中总共有五个步骤，每个步骤将为元素定义一个圆角，一个回转和不同的背景色，下面是实现的步骤和代码。
基本元素
首先创建一个标记，动画的元素。甚至不用class，仅仅只用一个div:
Then use element selection to add styles to the div:
div {
width : 200px ;
height : 200px ;
background-color: coral;
}
Declare Keyframes
Define a @keyframes named square-to-circle. The five steps are as follows:
@keyframes square-to-circle {
0% {}
25% {}
50% {}
75% {}
100% {}
}
You need to define some styles for each step, start by defining rounded corners for each rectangle corner:
@-webkit-keyframes square-to- circle {
0% {
border-radius: 0 0 0 0 ;
}
25% {
border-radius: 50% 0 0 0 ;
}
50% {
border-radius: 50% 50% 0 0 ;
}
75% {
border-radius: 50% 50% 50% 0 ;
}
100% {
border-radius: 50% ;
}
}
Then define a different background color for each step:
@keyframes square -to- circle {
0% {
border-radius: 0 0 0 0 ;
background :coral;
}
25 % {
border-radius: 50% 0 0 0 ;
background: darksalmon;
}
50% {
border-radius: 50% 50% 0 0 ;
background :indianred; % 50% 0 ;
background :lightcoral;
}
100% {
border-radius: 50%;
background :darksalmon;
}
}
Rotate the DIV to add a little visual effect:
@keyframes square-to- circle {
0% {
border-radius: 0 0 0 0 ;
background :coral;
transform:rotate( 0 deg);
}
25% {
border-radius: 50% 0 0 0 ;
background :darksalmon;
transform:rotate( 45 deg);
}
50% {
border-radius: 50% 50% 0 0 ;
background :indianred;
transform:rotate( 90 deg);
}
75% {
border-radius: 50% 50% 50% 0 ;
background :lightcoral;
transform:rotate( 135 deg);
}
100% {
border-radius: 50% ;
background :darksalmon;
transform:rotate( 180 deg);
}
}
应用动画
定义了square-to-circle动画后，需要将它应用到div上：
div {
width : 200px ;
height : 200px ;
background-color : coral;
animation: square-to- circle 2 s 1 s infinite alternate;
}
上面使用了简写的动画属性，它们的状态是：
动画名：square-to-circle. 动画间隔：2s. 动画延迟：1s. 动画循环次数是无限的. 动画运行方向是交替的, 首先从开始到结束，然后返回到最开始，然后到结束，循环往复。 使用Timing-Function
可以为animation添加的最后一个属性是animation-timing-function.定义移动的速度，加速或者减速。这个函数可以是一个非常详细的值，尴尬的手动计算，但是有很多免费的网站为timing-function提供资源和在线定制。
例如：CSS Easing Animation Tool，现在来计算我们的定时功能。
运用立方贝塞尔函数为square-to-circle动画添加伸缩效果。
div {
width : 200px ;
height : 200px ;
background-color : coral;
animation: square-to- circle 2 s 1 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate;
}
The final code without using the browser prefix ( -webkit- , -moz- , -ms- , -o- ) is as follows:
div {
width : 200px;
height: 200px;
background-color: coral;
animation: square-to- circle 2 s . 5 s infinite cubic-bezier( 1 , . 015 ,. 295 , 1.225 ) alternate;
}
@keyframes square-to- circle {
0% {
border-radius: 0 0 0 0 ;
background :coral;
transform:rotate( 0 deg);
}
25% {
; border-radius: 50% 0 0 0 ;
background: darksalmon;
transform:rotate( 45 deg);
}
50% {
border-radius: 50% 50% 0 0 ;
background :indianred;
transform:rotate( 90 deg);
}
75% {
border-radius: 50% 50% 50% 0 ;
background: lightcoral;
transform: rotate( 135 deg);
}
100% {
border-radius: 50%;
background: darksalmon;
transform:rotate( 180 deg);
}
}
Last Things
View in Modern Everything runs fine in the browser, but rendering objects in Firefox is a bit lacking and the edges appear jagged:
Fortunately, there is a workaround. After adding a transparent outline to the div, Firefox will render perfectly!
outline: 1px solid transparent; >
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
