Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

keyframes の検索結果:

【CSS/小ネタ】ドアの向こうに

… ドアの向こうに @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{ …

【CSS】姫のお辞儀【backgroundプロパティアニメーション】

…解説 姫のお辞儀 @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…

【CSS】姫のスクワット(?)

…っぱりスクワット @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…

【CSS/実験】スクワットの動きを表現できるか試してみた、だけ

…」を、画像を伴わずにkeyframesで再現する事を試みてみました。 スクワットの動きを表現できるか試してみた、だけ コード 結局のところ、高さも縦位置も動作指定が必要? スクワットの動きを表現できるか試してみた、だけ @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } @keyframes testb{ 0%{top:0px;} 100%{top:100px;} } .test{ position:relati…

【CSS】跳ね続けるボールとfloat:left;【小ネタ】

…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】謎リズムアニメーション

…です!! 「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…

【ツール】リズミカルkeyframeアニメーション生成

…て、リズミカルに動くkeyframesアニメーションを作ってみました。 ただ、手順が結構煩雑で、 【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】 - Little Strange Software によって%の割合だけは算出したものの「手間がかかる&分かりづらい」ものとなっており、新たなリズムを作ろうとするとかなり大変そうです。 そこで、今回はポチポチとクリックするだけでkeyframes指定を含むコードを生成するツールを作ってみました! リズミ…

【CSS】リズミカルなアニメーション【実験段階】

…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…

【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】

…? 例えばCSS。 keyframesやgradientで、%指定で均等に分断したくなる事がよくあります(←自分だけ?)。 そんな時、「0,50,100」や「0,25,50,75,100」程度なら即座に分かりますが、さらにその半分、そしてさらにもう半分…となると、なかなか計算が面倒くさくなってくるので、この際、コードに転用しやすい形で出力してくれるツールを、と作ってしまいました。 リズミカルなアニメーションを目指して もっと書くと、keyframesアニメーションを作成する際…

激安PCが届いたので、慣らしにCSSコードを書いてみました。

…書いてみたコード @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; } コード <…

【謎CSS】アニメーション区切線

…ーション区切り線 @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…

【謎CSSアニメーション】光の龍…?

…った 光の龍…? @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…

【CSS】回転体を増やした疑似3D

…う方は 疑似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…

【CSS】また流星群(今度は線形)

…がき また流星群 @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…

【CSS】疑似3D 前後関係

…他、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…

【おまけ】疑似3D、再生時間をずらすと…?

… 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…

【CSS】疑似3D【実験】

…いかも 疑似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…

【CSS】流星群

…あとがき 流星群 @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…

【CSS】落下アニメーション【keyframesの復習】

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

【CSS小ネタ】透過波紋を見出しに応用するコード

…ド <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%,…

【CSS】透過波紋、中心位置変更【小ネタ】

…紋、中心位置変更 @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…

【CSS】水滴落下、からの透過波紋

…、からの透過波紋 @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…

【CSS】(トリッキーな方法で)透過波紋!

…dientの内容は、keyframesの『徐々に変化』に対応させられない」のを、「background-sizeを変化させる」事で 円の大きさをアニメーション変化させていたもので、輪の色(透過度含む)もまた「radial-gradientの内容」に書く内容なのにどうやって変化させたものか? という、新たな壁に直面する事になります。 今回は、「トリッキーな方法」で、「それっぽい」ものを実現してみました。 透過波紋 コード トリッキーな方法 あとがき 透過波紋 @keyframe…

【ツール】雨降りCSSコード生成ツール

…'; 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ネタとCSSの未来

…かけ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) ,…

煮詰まらないCSSネタ

…ズの半分づつズラした」ものでした! ずらすのをアニメーションしてみるとよく分かります @keyframes anm{ 0%,10%{background-position:0px 0px;} 90%,100%{background-position:50px 50px;} } …という、「辺の窪んだ菱形」の描き方、なんですが、さてこれをどう活用したものか?というところで脱線したのが、昨日の記事ネタでしたw ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

【CSS】瞬く星空

…今回はまた、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…

【CSS】border-image-sliceをkeyframesアニメーション【実験】

…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…

【CSS】音波攻撃!【水面の波紋アレンジ】

…首竜の音波攻撃! @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…