丸ワイプのサイズを徐々に大きくしながら全体表示するアニメーション。
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 | .frame-img { display : block ; position : relative ; /* for before 疑似要素 */ } .frame-img > img { width : 100% ; height : auto ; } .circleWipe::before { /*for 丸ワイプの表示 */ position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; content : "" ; animation-duration: 1 s; animation-fill-mode: both ; animation-name: circleWipe } @keyframes circleWipe { 0% { background-image : radial-gradient( circle , transparent 0% , white 5% , white 100% ); } 10% { background-image : radial-gradient( circle , transparent 10% , white 15% , white 100% ); } 20% { background-image : radial-gradient( circle , transparent 20% , white 25% , white 100% ); } 30% { background-image : radial-gradient( circle , transparent 30% , white 35% , white 100% ); } 40% { background-image : radial-gradient( circle , transparent 40% , white 45% , white 100% ); } 50% { background-image : radial-gradient( circle , transparent 50% , white 55% , white 100% ); } 60% { background-image : radial-gradient( circle , transparent 60% , white 65% , white 100% ); } 70% { background-image : radial-gradient( circle , transparent 70% , white 75% , white 100% ); } 80% { background-image : radial-gradient( circle , transparent 80% , white 85% , white 100% ); } 90% { background-image : radial-gradient( circle , transparent 90% , white 95% , white 100% ); } 100% { background-image : none ; } } |
補足
- circleWipeクラスの疑似要素で、CSSの放射グラデーションを表示している。
- 放射グラデーションの中心部を透過、その外側を白のグラデーションに指定。徐々に透過部分の直径を大きくして、全体表示されるようアニメーションを設定している。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
HTML
1 2 3 | < div > < span class = "frame-img circleWipe" >< img alt = "" src = "./files/image-01.jpg" /></ span > </ div > |
補足
- circleWipeクラスをつけたブロック要素の中がアニメーション表示される。