keyframes の検索結果:
… ドアの向こうに @keyframes brbr{ 0%{transform:rotateY(-95deg);} 100%{transform:rotateY(95deg);} } .waku{ position:relative; width:280px; height:200px; background:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100%; } .waku>div{ …
…解説 姫のお辞儀 @keyframes ozga{ 0%,30%{height:200px;} 90%,100%{height:100px;} } @keyframes ozgb{ 0%,30%{top:0px;} 90%,100%{top:100px;} } .ozg{ position:relative; width:280px; height:400px; } .ozg div{ position:relative; width:100%; left:0; backgr…
…っぱりスクワット @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } @keyframes testb{ 0%{top:0px;} 100%{top:100px;} } .test{ position:relative; width:280px; height:400px; } .test div{ position:relative; width:100%; left:0; background-image:u…
…」を、画像を伴わずにkeyframesで再現する事を試みてみました。 スクワットの動きを表現できるか試してみた、だけ コード 結局のところ、高さも縦位置も動作指定が必要? スクワットの動きを表現できるか試してみた、だけ @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } @keyframes testb{ 0%{top:0px;} 100%{top:100px;} } .test{ position:relati…
…at:left; @keyframes bnda{ 0%,100%{background-position:0 0;} 50%{background-position:0 100%;} 0%,47%,57%,100%{background-size:30px 30px;} 50%{background-size:30px 5px;} } .bnd{ width:30px; height:100px; background-image:radial-gradient(farth…
…です!! 「CSSのkeyframesでリズミカルなアニメーションを作ろう」という試み、なんだかこんなのが出来ました。 謎リズムアニメーション コード なんなんでしょうね?これ 変更例 謎リズムアニメーション @keyframes nazorzma{ 0%,87.6%,100%{background-position:0 0;} 12.5%,25%,37.5%{background-position:0 100%;} 37.6%,50%{background-position…
…て、リズミカルに動くkeyframesアニメーションを作ってみました。 ただ、手順が結構煩雑で、 【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】 - Little Strange Software によって%の割合だけは算出したものの「手間がかかる&分かりづらい」ものとなっており、新たなリズムを作ろうとするとかなり大変そうです。 そこで、今回はポチポチとクリックするだけでkeyframes指定を含むコードを生成するツールを作ってみました! リズミ…
…Sです!! CSSのkeyframesアニメーションで、リズミカルな動きを作ったら面白いかな?と試みてみました。 たんたたたんたん、たんたん♪ コード 要となるのは%指定部分 0~100%を2の累乗数で分断するぞう君 リズム あとがき たんたたたんたん、たんたん♪ @keyframes rzma{ 0%,12.5%,18.75%,25%,37.5%,50%,62.5%,75%,87.5%,100%{transform:translatey(0px);} 3.125%,15.6…
…? 例えばCSS。 keyframesやgradientで、%指定で均等に分断したくなる事がよくあります(←自分だけ?)。 そんな時、「0,50,100」や「0,25,50,75,100」程度なら即座に分かりますが、さらにその半分、そしてさらにもう半分…となると、なかなか計算が面倒くさくなってくるので、この際、コードに転用しやすい形で出力してくれるツールを、と作ってしまいました。 リズミカルなアニメーションを目指して もっと書くと、keyframesアニメーションを作成する際…
…書いてみたコード @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%; animation:rbwa 15s ease infinite; } コード <…
…ーション区切り線 @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-position-x:0,calc(50% - 20px),50%,calc(50% + 20px),ca…
…った 光の龍…? @keyframes stardragonx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes stardragony{ 0%{background-position-y:0%;} 100%{background-position-y:100%;} } .stardragon{ position:relative; height:200px; backg…
…う方は 疑似3D @keyframes d3dzx{ 0%{background-position-x:var(--i);} 100%{background-position-x:calc(100% - var(--i));} } @keyframes d3dzy{ 0%{background-position-y:40%;background-size:calc(40px - var(--s)) calc(40px - var(--s));} 100%{background…
…がき また流星群 @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%,30%{background-position-x:200px,100%;} 40%,50%{background-position-x:100p…
…他、3つのセレクタ keyframes内にz-indexの指定を追加 疑似3D 前後関係 @keyframes d3dzx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes d3dzy{ 0%{background-position-y:40%;background-size:20px 20px;} 100%{background-position-y:60%;backg…
… 2sと1.8s @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes d3day{ 0%{background-position-y:0%;background-size:20px 20px;} 100%{background-position-y:100%;background-size:90px 90px;} } .d3d{ heigh…
…いかも 疑似3D @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes d3day{ 0%{background-position-y:0%;background-size:20px 20px;} 100%{background-position-y:100%;background-size:90px 90px;} } .d3d{ heigh…
…あとがき 流星群 @keyframes stardusta{ 0%{background-position:0 0,5000px 0,0 0;} 100%{background-position:0 0,0 0,0 0;} } .stardust{ height:200px; background-image: repeating-linear-gradient(135deg,#000000 0px 9px,#00000000 10px 13px,#000000 14px 1…
…!! このブログで、keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 …
…ド <style>@keyframes trwavea{0%{background-size:100% 100%,100% 100%;}30%,100%{background-size:2000% 2000%,100% 100%;}}article h2{background-image:radial-gradient(farthest-side at 25% 75%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888f…
…査 調査結果報告 @keyframes trwavea{ 0%{background-size:100% 100%,100% 100%;} 30%,100%{background-size:2000% 2000%,100% 100%;} } article h2{ background-image: radial-gradient(farthest-side at 25% 75%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,…
…紋、中心位置変更 @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 0% 50%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#88…
…、からの透過波紋 @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%{background-position:50% 50%,50% 50%,0 0;} } .trwa…
…dientの内容は、keyframesの『徐々に変化』に対応させられない」のを、「background-sizeを変化させる」事で 円の大きさをアニメーション変化させていたもので、輪の色(透過度含む)もまた「radial-gradientの内容」に書く内容なのにどうやって変化させたものか? という、新たな壁に直面する事になります。 今回は、「トリッキーな方法」で、「それっぽい」ものを実現してみました。 透過波紋 コード トリッキーな方法 あとがき 透過波紋 @keyframe…
…'; txt+='@keyframes rainya{\n'; txt+='0%{background-position:0px 0px,'+cleft2.value+'px '+ctop2.value+'px,'+cleft3.value+'px '+ctop3.value+'px,0px 0px;}\n'; txt+='100%{background-position:'+(parseInt(cwidth.value)*-1)+'px '+Math.round(parse…
…かけCSS~雨~ @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,#ffffff00 10px,#ffffff80 12px,#ffffff00 14px) ,…
…ズの半分づつズラした」ものでした! ずらすのをアニメーションしてみるとよく分かります @keyframes anm{ 0%,10%{background-position:0px 0px;} 90%,100%{background-position:50px 50px;} } …という、「辺の窪んだ菱形」の描き方、なんですが、さてこれをどう活用したものか?というところで脱線したのが、昨日の記事ネタでしたw ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^
…今回はまた、CSSのkeyframesアニメーションで遊んでみました。 瞬く星空 コード 星が瞬く仕組み というネタを考えたのですが 瞬く星空 @keyframes twstara{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:0px 0px,0px 0px,0px 300px;} } .twstar{ height:300px; background-image: rep…
…age-sliceはkeyframesでアニメーションにできるのか?」を試してみました。 実験 コード アニメ化できましたね! 実験 @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,trans…
…首竜の音波攻撃! @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:210px; background-image: radial-gradient(farthes…