アニメの効果


話が多くないので、コードを見てください。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>lodading     </title>
 <link rel="stylesheet" href="style.css"/>
 <style>
 .box{
 width: 100%;
 padding:3%;
 box-sizing: border-box;
 overflow: hidden;
 }
 .box .loader{
 width: 30%;
 float: left;
 height: 200px;
 margin-right: 3%;
 border:1px #ccc solid;
 box-sizing: border-box;
 display: flex; 
 align-content: center; 
 justify-content: center; 
 position: relative;
 }
 .box .loading {
 position: absolute;
 top: 50px;
 }
 @-webkit-keyframes loading-1{
 0%{
 transform: rotate(0deg);
 }
 50%{
 transform: rotate(180deg);
 }
 100%{
 transform: rotate(360deg);
 }
 }
 .demo-1 .loading{
 width: 35px;
 height: 35px;
 position: relative;
 }
 .demo-1 .loading i{
 display: block;
 width: 100%;
 height: 100%;
 border-radius:50%;
 background: linear-gradient(transparent 0%, transparent 70%, #333 30% ,#333 100%);
 -webkit-animation: loading-1 .6s linear 0s infinite;
 }
 @-webkit-keyframes loading-2{
 0%{
 transform: scaleY(1);
 }
 50%{
 transform: scaleY(0.4);
 }
 100%{
 transform: scaleY(1);
 }
 }
 .demo-2 .loading i{
 display: inline-block;
 width: 4px;
 height: 35px;
 border-radius: 2px;
 margin:0 2px;
 background-color: #333;
 }
 .demo-2 .loading i:nth-child(1){
 -webkit-animation:loading-2 1s ease-in .1s infinite;
 }
 .demo-2 .loading i:nth-child(2){
 -webkit-animation:loading-2 1s ease-in .2s infinite;
 }
 .demo-2 .loading i:nth-child(3){
 -webkit-animation:loading-2 1s ease-in .3s infinite;
 }
 .demo-2 .loading i:nth-child(4){
 -webkit-animation:loading-2 1s ease-in .4s infinite;
 }
 .demo-2 .loading i:nth-child(5){
 -webkit-animation:loading-2 1s ease-in .5s infinite;
 }
 .demo-3 .loading{
 position: relative;
 }
 .demo-3 .loading i{
 display: block;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 background-color: #333;
 position: absolute;
 }
 .demo-3 .loading i:nth-child(1){
 top: 25px;
 left: 0;
 -webkit-animation:loading-3 1s ease 0s infinite;
 }
 .demo-3 .loading i:nth-child(2){
 top: 17px;
 left: 17px;
 -webkit-animation:loading-3 1s ease -0.12s infinite;
 }
 .demo-3 .loading i:nth-child(3){
 top: 0px;
 left: 25px;
 -webkit-animation:loading-3 1s ease -0.24s infinite;
 }
 .demo-3 .loading i:nth-child(4){
 top: -17px;
 left: 17px;
 -webkit-animation:loading-3 1s ease -0.36s infinite;
 }
 .demo-3 .loading i:nth-child(5){
 top: -25px;
 left: 0;
 -webkit-animation:loading-3 1s ease -0.48s infinite;
 }
 .demo-3 .loading i:nth-child(6){
 top: -17px;
 left: -17px;
 -webkit-animation:loading-3 1s ease -0.6s infinite;
 }
 .demo-3 .loading i:nth-child(7){
 top: 0px;
 left: -25px;
 -webkit-animation:loading-3 1s ease -0.72s infinite;
 }
 .demo-3 .loading i:nth-child(8){
 top: 17px;
 left: -17px;
 -webkit-animation:loading-3 1s ease -0.84s infinite;
 }
 @-webkit-keyframes loading-3{
 50%{
 transform: scale(0.4);
 opacity: .3
 }
 100%{
 transform: scale(1);
 opacity: 1
 }
 }
 @-webkit-keyframes loading-4{
 0%{
 transform: scale(0);
 opacity: 0;
 }
 1%{
 opacity: 1;
 }
 100%{
 transform: scale(1);
 opacity: 0;
 }
 }
 .demo-4 .loading i:nth-child(1){
 -webkit-animation:loading-4 1s linear 0s infinite;
 }
 .demo-4 .loading i:nth-child(2){
 -webkit-animation:loading-4 1s linear 0.2s infinite;
 }
 .demo-4 .loading i:nth-child(3){
 -webkit-animation:loading-4 1s linear 0.4s infinite;
 }
 .demo-4 .loading{
 width: 60px;
 height: 60px;
 position: relative;
 }
 .demo-4 .loading i{
 display: block;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background-color: #333;
 position: absolute;
 left: 0;
 top: 0;
 opacity: 0;
 }
 .demo-5 .loading{
 width: 40px;
 height: 40px;
 position: relative;
 }
 .demo-5 .loading i{
 display: block;
 border:2px solid #333;
 border-color: transparent #333;
 border-radius: 50%;
 position: absolute;
 }
 .demo-5 .loading i:first-child{
 width: 35px;
 height: 35px;
 top:0px;
 left: 0px;
 -webkit-animation:loading-5 1s ease-in-out 0s infinite;
 }
 .demo-5 .loading i:last-child{
 width: 15px;
 height: 15px;
 top:10px;
 left: 10px;
 -webkit-animation:loading-5 1s ease-in-out 0.5s infinite reverse;
 }
 @-webkit-keyframes loading-5{
 0%{
 transform: rotate(0deg) scale(1);
 }
 50%{
 transform: rotate(180deg) scale(0.6);
 }
 100%{
 transform: rotate(360deg) scale(1);
 }
 }
 .demo-6 .loading{
 width: 80px;
 height: 20px;
 position: relative;
 }
 .demo-6 .loading i{
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #333;
 margin-right: 10px;
 position: absolute;
 }
 @-webkit-keyframes loading-6{
 0%{
 left: 100px;
 top: 0;
 }
 80%{
 left: 0;
 top: 0;
 }
 85%{
 left: 0;
 top: -20px;
 width: 20px;
 height: 20px;
 }
 90%{
 width: 40px;
 height: 20px;
 }
 95%{
 left: 100px;
 top: -20px;
 width: 20px;
 height: 20px;
 }
 100%{
 left: 100px;
 top: 0;
 }
 }
 .demo-6 .loading i:nth-child(1){
 -webkit-animation:loading-6 2s linear 0s infinite;
 }
 .demo-6 .loading i:nth-child(2){
 -webkit-animation:loading-6 2s linear -0.4s infinite;
 }
 .demo-6 .loading i:nth-child(3){
 -webkit-animation:loading-6 2s linear -0.8s infinite;
 }
 .demo-6 .loading i:nth-child(4){
 -webkit-animation:loading-6 2s linear -1.2s infinite;
 }
 .demo-6 .loading i:nth-child(5){
 -webkit-animation:loading-6 2s linear -1.6s infinite;
 }
 .demo-7 .loading i {
 background-color: #777;
 border-radius: 2px;
 margin: 2px;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 position: absolute;
 width: 5px;
 height: 15px;
 }
 .demo-7 .loading-1 {
 top: 20px;
 left: 0;
 -webkit-animation: loading 1.2s 0.12s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.12s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.12s infinite ease-in-out;
 -o-animation: loading 1.2s 0.12s infinite ease-in-out;
 animation: loading 1.2s 0.12s infinite ease-in-out;
 }
 .demo-7 .loading-2 {
 top: 13.63636px;
 left: 13.63636px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-animation: loading 1.2s 0.24s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.24s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.24s infinite ease-in-out;
 -o-animation: loading 1.2s 0.24s infinite ease-in-out;
 animation: loading 1.2s 0.24s infinite ease-in-out;
 }
 .demo-7 .loading-3 {
 top: 0;
 left: 20px;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
 -webkit-animation: loading 1.2s 0.36s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.36s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.36s infinite ease-in-out;
 -o-animation: loading 1.2s 0.36s infinite ease-in-out;
 animation: loading 1.2s 0.36s infinite ease-in-out;
 }
 .demo-7 .loading-4 {
 top: -13.63636px;
 left: 13.63636px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-animation: loading 1.2s 0.48s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.48s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.48s infinite ease-in-out;
 -o-animation: loading 1.2s 0.48s infinite ease-in-out;
 animation: loading 1.2s 0.48s infinite ease-in-out;
 }
 .demo-7 .loading-5 {
 top: -20px;
 left: 0;
 -webkit-animation: loading 1.2s 0.6s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.6s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.6s infinite ease-in-out;
 -o-animation: loading 1.2s 0.6s infinite ease-in-out;
 animation: loading 1.2s 0.6s infinite ease-in-out;
 }
 .demo-7 .loading-6 {
 top: -13.63636px;
 left: -13.63636px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-animation: loading 1.2s 0.72s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.72s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.72s infinite ease-in-out;
 -o-animation: loading 1.2s 0.72s infinite ease-in-out;
 animation: loading 1.2s 0.72s infinite ease-in-out;
 }
 .demo-7 .loading-7 {
 top: 0;
 left: -20px;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
 -webkit-animation: loading 1.2s 0.84s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.84s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.84s infinite ease-in-out;
 -o-animation: loading 1.2s 0.84s infinite ease-in-out;
 animation: loading 1.2s 0.84s infinite ease-in-out;
 }
 .demo-7 .loading-8 {
 top: 13.63636px;
 left: -13.63636px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-animation: loading 1.2s 0.96s infinite ease-in-out;
 -moz-animation: loading 1.2s 0.96s infinite ease-in-out;
 -ms-animation: loading 1.2s 0.96s infinite ease-in-out;
 -o-animation: loading 1.2s 0.96s infinite ease-in-out;
 animation: loading 1.2s 0.96s infinite ease-in-out;
 }
 @-webkit-keyframes loading {
 50% {
  opacity: 0.3;
 }
 100% {
  opacity: 1;
 }
 }
 @-moz-keyframes loading {
 50% {
 opacity: 0.3;
 }
 100% {
 opacity: 1;
 }
 }
 @-ms-keyframes loading {
 50% {
 opacity: 0.3;
 }
 100% {
 opacity: 1;
 }
 }
 @-o-keyframes loading {
 50% {
 opacity: 0.3;
 }
 100% {
 opacity: 1;
 }
 }
 @keyframes loading {
 50% {
  opacity: 0.3;
 }
 100% {
  opacity: 1;
 }
 } 
 </style>
</head>
<body>
 <div class="box">
 <div class="loader demo-1">
 <div class="loading">
 <i></i>
 </div>
 </div>
 <div class="loader demo-2">
 <div class="loading">
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 </div>
 </div>
 <div class="loader demo-3">
 <div class="loading">
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 </div>
 </div>
 <div class="loader demo-4">
 <div class="loading">
 <i></i>
 <i></i>
 <i></i>
 </div>
 </div>
 <div class="loader demo-5">
 <div class="loading">
 <i></i>
 <i></i>
 </div>
 </div>
 <div class="loader demo-6">
 <div class="loading">
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 </div>
 </div>
 <div class="loader demo-7">
 <div class="loading">
 <i class="loading-1"></i>
 <i class="loading-2"></i>
 <i class="loading-3"></i>
 <i class="loading-4"></i>
 <i class="loading-5"></i>
 <i class="loading-6"></i>
 <i class="loading-7"></i>
 <i class="loading-8"></i>
 </div>
 </div> 
 </div>
</body>
</html>
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。