ローディングアニメーション第2弾。
マークアップは下記の通り。
■HTML
1 2 3 4 5 6 7 8 9 | < div class = "stage-2" > < span >Loading...</ span > < span class = "l-1" ></ span > < span class = "l-2" ></ span > < span class = "l-3" ></ span > < span class = "l-4" ></ span > < span class = "l-5" ></ span > < span class = "l-6" ></ span > </ div > |
■CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | .stage -2 { font-family : meiryo; background : #fff ; width : 200px ; height : 100px ; margin : 0 auto ; padding : 100px 0 0 100px ; } span { display : block ; margin : 0 auto ; } span[class*= "l-" ] { height : 4px ; width : 4px ; background : #000 ; display : inline- block ; margin : 12px 2px ; border-radius: 100% ; -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -webkit-animation: loader 4 s infinite; -webkit-animation-timing-function: cubic-bezier( 0.030 , 0.615 , 0.995 , 0.415 ); -webkit-animation-fill-mode: both ; -moz-animation: loader 4 s infinite; -moz-animation-timing-function: cubic-bezier( 0.030 , 0.615 , 0.995 , 0.415 ); -moz-animation-fill-mode: both ; -ms-animation: loader 4 s infinite; -ms-animation-timing-function: cubic-bezier( 0.030 , 0.615 , 0.995 , 0.415 ); -ms-animation-fill-mode: both ; animation: loader 4 s infinite; animation-timing-function: cubic-bezier( 0.030 , 0.615 , 0.995 , 0.415 ); animation-fill-mode: both ; } span.l -1 {-webkit-animation-delay: 1 s;animation-delay: 1 s;-ms-animation-delay: 1 s;-moz-animation-delay: 1 s;} span.l -2 {-webkit-animation-delay: 0.8 s;animation-delay: 0.8 s;-ms-animation-delay: 0.8 s;-moz-animation-delay: 0.8 s;} span.l -3 {-webkit-animation-delay: 0.6 s;animation-delay: 0.6 s;-ms-animation-delay: 0.6 s;-moz-animation-delay: 0.6 s;} span.l -4 {-webkit-animation-delay: 0.4 s;animation-delay: 0.4 s;-ms-animation-delay: 0.4 s;-moz-animation-delay: 0.4 s;} span.l -5 {-webkit-animation-delay: 0.2 s;animation-delay: 0.2 s;-ms-animation-delay: 0.2 s;-moz-animation-delay: 0.2 s;} span.l -6 {-webkit-animation-delay: 0 ;animation-delay: 0 ;-ms-animation-delay: 0 ;-moz-animation-delay: 0 ;} @-webkit-keyframes loader { 0% {-webkit-transform: translateX( -30px ); opacity: 0 ;} 25% {opacity: 1 ;} 50% {-webkit-transform: translateX( 30px ); opacity: 0 ;} 100% {opacity: 0 ;} } @-moz-keyframes loader { 0% {-moz-transform: translateX( -30px ); opacity: 0 ;} 25% {opacity: 1 ;} 50% {-moz-transform: translateX( 30px ); opacity: 0 ;} 100% {opacity: 0 ;} } @-keyframes loader { 0% {-transform: translateX( -30px ); opacity: 0 ;} 25% {opacity: 1 ;} 50% {-transform: translateX( 30px ); opacity: 0 ;} 100% {opacity: 0 ;} } @-ms-keyframes loader { 0% {-ms-transform: translateX( -30px ); opacity: 0 ;} 25% {opacity: 1 ;} 50% {-ms-transform: translateX( 30px ); opacity: 0 ;} 100% {opacity: 0 ;} } |