…:#ddaaaa; animation:brbr 6s ease-in-out infinite; } .waku>div>div:nth-child(1){ left:0; transform-origin:0 50%; animation-direction:alternate; } .waku>div>div:nth-child(2){ right:0; transform-origin:100% 50%; animation-direction:alternate-r…

…11.png'); animation:1.5s infinite alternate; } .ozg div:nth-child(1){ background-size:100% 400%; height:100px; background-position:0 0; animation-name:ozgb; } .ozg div:nth-child(2){ background-size:100% 200%; background-position:0 50%; anim…

…tion:0 0; animation:testb 1s linear infinite alternate; } .test div:nth-child(2){ background-position:0 100%; animation:testa 1s linear infinite alternate,testb 1s linear infinite alternate; } コード <style>@keyframes testa{0%{height:200px;}10…

…olid red; animation:testb 1s infinite alternate; } .test div:nth-child(2){ border:1px solid blue; animation:testa 1s infinite alternate,testb 1s infinite alternate; } コード <style>@keyframes testa{0%{height:200px;}100%{height:100px;}}@keyfram…

…oat:left; animation:bnda 3s linear infinite; } ボールが跳ね続けます。 そして、float:left;を指定しているため、それ以降の文章がこのように回り込むカタチになります。 float:left;の一行を削除すると、横に文章が並ぶ事がなくなります。 コード <style>@keyframes bnda{0%,100%{background-position:0 0;}50%{background-position:0 100%;…

…o-repeat; animation:nazorzma 1.6s linear infinite; } コード <style>@keyframes nazorzma{0%,87.6%,100%{background-position:0 0;}12.5%,25%,37.5%{background-position:0 100%;}37.6%,50%{background-position:100% 100%;}62.5%,75%,87.5%{background-posit…

…ht:50px;\nanimation:rzma 10s linear infinite;\n}\n\nこのような動きになります'; ct.innerHTML=txt; cssc.innerHTML=txt.replace(/&/g,'&').replace(//g,'>').replace(/\n/g,''); cnvx.clearRect(0,0,650,100); cnvx.beginPath(); cnvx.moveTo(0,80-20*bt[0]); for(i=1…

…n:center; animation:rzma 4s linear infinite; } たんたたたんたん、たんたん♪ コード <style>@keyframes rzma{0%,12.5%,18.75%,25%,37.5%,50%,62.5%,75%,87.5%,100%{transform:translatey(0px);}3.125%,15.625%,21.875%,28.125%,40.625%,65.625%,78.125%{transform:translat…

…00% 100%; animation:rbwa 15s ease infinite; } コード <style>@keyframes rbwa{0%,50%{background-position-x:0%;}100%{background-position-x:100%;}}.rbw{height:5px;background:repeating-linear-gradient(120deg,red,yellow,blue,red 10%) 0 0/1000% 100%;…

…o-repeat; animation:hrcrka 15s linear infinite; } コード <style>@keyframes hrcrka{0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);}24%{background-pos…

…ar(--sz); animation: stardragonx 3.5s ease-in-out var(--d) infinite alternate ,stardragony 1.07s ease-in-out var(--d) infinite alternate; } .stardragon div:nth-child(1){--d:0.1s;--sz:60px;} .stardragon div:nth-child(2){--d:0.2s;--sz:56px;} …

…4) 100%); animation: d3dzx var(--t) ease-in-out calc(var(--t) / 2) infinite alternate ,d3dzy var(--t) ease-in-out infinite alternate; } .d3dz div:nth-child(2){ --i:30%; --z:1; --s:10px; --t:4s; --c1:#888844; --c2:#cc8844; --c3:#ffff00; --c4…

…00% 300%; animation:shtstra 1.4s linear infinite,shtstrb 7s linear infinite; } コード <style>@keyframes shtstra{0%{background-position-y:0,100%;}50%,100%{background-position-y:0,0%;}}@keyframes shtstrb{0%,10%{background-position-x:0px,100%;}20…

…o-repeat; animation: d3dzx 5s ease-in-out 2.5s infinite alternate ,d3dzy 5s ease-in-out infinite alternate; } .d3dz div:nth-child(2){ background:radial-gradient(farthest-side,#ffffff 49%,#ffcc00 50%,#ffcc0000 100%) 50% 50%/80px 80px no-repe…

…o-repeat; animation: d3dax 2s ease-in-out infinite alternate ,d3day 1.8s ease-in-out infinite alternate; } コード <style>@keyframes d3dax{0%{background-position-x:0%;}100%{background-position-x:100%;}}@keyframes d3day{0%{background-position-y:…

…o-repeat; animation: d3dax 5s ease-in-out 2.5s infinite alternate ,d3day 5s ease-in-out infinite alternate; } コード <style>@keyframes d3dax{0%{background-position-x:0%;}100%{background-position-x:100%;}}@keyframes d3day{0%{background-position…

…#000000); animation:stardusta 20s linear infinite; padding:10px; color:white; } 流星群をCSSで作ってみました。 コード <style>@keyframes stardusta{0%{background-position:0 0,5000px 0,0 0;}100%{background-position:0 0,0 0,0 0;}}.stardust{height:200px;backgrou…

…keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 その１ シンプルに落…

…important;animation:trwavea 15s linear infinite;}</style> 赤太字で書いた「25% 75%」は波紋の中心位置（横・縦）です。 0～100%の間で自由に設定できますが、３か所の設定を合わせる必要があります。 #ffeebbが波紋の色で、こちらもお好きな色に変更可能です^^ と、なにげなく仕込んだコードを晒してみましたｗ はてなブログの「編集 見たまま」で設定できる「大見出し」はh3、「中見出し」はh4、「小見出し」はh5で…

…mportant; animation:trwavea 15s linear infinite; } はい、「チョコレートソフトクリームが伝票にどう記載されるか」という調査でしたｗ ところで、前回訪問時…どころか、移転前の店舗でも、店内にあるメニューをろくに見ていませんでした。 今回、友人を案内した事でメニューを確認してみると…どうも「〇〇ソフトクリーム」というメニューは、入口に食品サンプルが飾られていた「チョコレートソフトクリーム」「イチゴソフトクリーム」以外にもあった事が…

…o-repeat; animation:trwavea 3s linear infinite; } コード <style>@keyframes trwavea{0%{background-size:100% 100%,100% 100%;}95%,100%{background-size:2000% 2000%,100% 100%;}}.trwave{height:210px;background-image:radial-gradient(farthest-side at …

…o-repeat; animation:trwavea 3s linear infinite; } コード <style>@keyframes trwavea{0%{background-size:20px 10px,100% 100%,100% 100%;}95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;}0%{background-position:50% -100%,50% 50%,0 0;}100%{b…

…o-repeat; animation:trwavea 3s linear infinite; } コード <style>@keyframes trwavea{0%{background-size:100% 100%,100% 100%;}95%,100%{background-size:2000% 2000%,100% 100%;}}.trwave{height:210px;background-image:radial-gradient(farthest-side,#88…

…n'; txt+='animation:rainya '+ca.value+'s linear infinite;\n'; txt+='}\n'; txt+='\n'; gs.innerHTML=txt; can.innerHTML=ca.value; cdegn.innerHTML=cdeg.value; crwn.innerHTML=crw.value cleftn.innerHTML=cleft.value; cwidthn.innerHTML=cwidth.value…

…00% 100%; animation:rainya 1s linear infinite; } コード <style>@keyframes rainya{0%{background-position:0px 0px,0px 0px;}100%{background-position:-50px 137px,0px 0px;}}.rainy{width:280px;height:280px;background-image:linear-gradient(110deg,#ff…

どうも！LSSです！！ little-strange.hatenablog.com は、実は書き始めた時は全く違うネタだったのが、書いてるうちにああなりました。 数日前から考えてるCSSネタがあるものの、どうにも煮詰まらなくて、結局違う形になっちゃったりしてますｗ とりあえず、その「煮詰まらない」ネタを暴露しちゃいます。 これ、どんな形に見えます？ コード（答え） ずらすのをアニメーションしてみるとよく分かります これ、どんな形に見えます？ …「辺の窪んだ菱形」、ですね。 こ…

…ck 48px); animation:twstara 40s linear infinite; color:white; font-weight:bold; font-size:150%; padding:10px; } 瞬く星空 コード <style>@keyframes twstara{0%{background-position:0px 0px,0px 0px,0px 0px;}100%{background-position:0px 0px,0px 0px,0px …

…ent 90%); animation:testa 3s infinite alternate; } 呼吸してるみたい コード <style>@keyframes testa{0%{border-image-slice:49%;}100%{border-image-slice:35%;}}.test{height:200px;border:40px solid;border-image-source:radial-gradient(farthest-side,transpar…

…o-repeat; animation:suimena 3s linear infinite; } コード <style>@keyframes suimena{0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%,100% 100%;}100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%,100% 100%;}}.suimen{width:280px;height:21…

…o-repeat; animation:suimena 3s linear infinite; } コード <style>@keyframes suimena{0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%;}100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%;}}.suimen{height:100px;background-color:#8888aa;bac…