…紋アニメーション @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; background-image: radial-gradient(farthest-side,…

…gradient @keyframes bgca{ 0%,20%,100%{background:yellow;} 25%,45%{background:lightblue;} 50%,70%{background:pink;} 75%,95%{background:lightgreen;} } .bgc{ width: 250px; height: 250px; padding:10px; border: 30px solid; border-image: conic-gr…

…のですが、それを更にkeyframesのアニメーションで動かす、というのをやってみました。 …という実験的な記事です。 動く三角背景 コード 三角形のサイズ 動く三角背景 @keyframes sankakua{ 0%,10%{background-position:60px 0px,40px 35px,0px 35px,60px 0px,20px 0px,40px 35px,0px 35px,20px 0px;} 20%,30%{background-position:60…

…い件 ボール乱舞 @keyframes radialsx{ 0%,100%{background-position-x:0%;} 50%{background-position-x:100%;} } @keyframes radialsy{ 0%,100%{background-position-y:0%;} 50%{background-position-y:100%;} } @keyframes radialsz{ 0%,100%{background-size:100p…

…、gradient＋keyframes実験、radial-gradient版です。 linear-gradient の時は傾きを指定する箇所に「to left top」を指定する事で、「画像サイズの変化に応じて角度変化」という手法を実験しました。 では、radial-gradientの場合は？？ 実験 コード 解説 組み合わせでこんな事も！ linear、radialときたら… 実験 @keyframes rtesta{ 0%,100%{background-size:10p…

…のには カーテン @keyframes curtaina{ 0%,20%,80%,100%{background-size:100% 12000%,100% 12000%;} 40%,60%{background-size:100% 2000%,100% 2000%;} 0%,30%{background-position:0% 51%,0% 51%;} 70%,100%{background-position:0% 0%,0% 0%;} } .curtain{ positi…

…ntを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{0%{background-image:linear-gradient(0deg , 色１ , 色２);}100%{background-image:linear-gradient(90deg , 色１ , 色２);} のように指定したとしても、角度が「0degから90degに徐々に変化」…とはなりません。他のgradientもそうですが、 ( ) の内容は…

…れない件については、keyframesの中でイメージを設定していたのですが、普通に指定すると普通に表示されました。…またしてもiPhone特有のクセが見つかったようですねｗ 次に、あまりにもドラえもんっぽい件について。いくらか試行錯誤しましたが、結局「目を横長楕円にする」というところに落ち着きました。それでも後ろ姿がまだドラえもんっぽかったですｗ 最後に、個性について。別に無くてもいいか、とも思ったのですが、ちょっとひと手間かけて、「後頭部になにか」をつけました^^後頭部につ…

…歩くキャラクター @keyframes test1a{ 0%,50%{ background: radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%), radial-gradient(5px 5px at 33px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%), radial-gradient(15px 13px at…

…話 余談 コード @keyframes divers{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:-800px 1600px,0px -800px,0px 0px;}/*ダイバー画像２種の変化後の位置を800の倍数で指定*/ } article{ background-image:/*ダイバー１、ダイバー２、背景の順に指定*/ url('https://cdn-ak.f.…

…き 蝶のはばたき @keyframes hbtk0{ 0%{transform:rotateX(-5deg) rotateY(0deg);} 100%{transform:rotateX(-5deg) rotateY(-360deg);} /*rotateX＝周回軌道の上下の傾き*/ } @keyframes hbtka{ 0%{transform:rotateY(90deg);} 100%{transform:rotateY(60deg);} } @keyframes hb…

…ない生活が続いていますがｗ 先日あげた記事の、 little-strange.hatenablog.com 「３枚限定」なのが弱かったネタですが、このやたら長いkeyframes定義、どうやらもうちょっと短くは出来るようです。（余計に分かりにくくなりそうでもあるのが難） 枚数を増やした設定をコード生成ツール化しようかなと思っていましたが…時間が足りなさそうでした^^; とりあえず、そのうち作る事にします。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…コード まるいの @keyframes maruinoa{ 0%,70%{ background-position: 18% 40%,40% 42%,16% 35%,40% 34%, 30% 55%, 76% 62%,100% 61%,100% 70%, 70% 10%, 50% 30%,10% 10%,50% 57%,50% 70%; } 80%,100%{ background-position: 21% 41%,45% 44%,16% 35%,40% 34%, 30% …

…、その「ややこしい」keyframesの内容について説明 自動フォトギャラリー @keyframes photoboxa{ 0%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 0%,0% 50%,0% 100%;} 10%{background-size:90% 90%,10% 10%,10% 10%;background-position:100% 100%,0% 50%,0% 100%;} 2…

…く分からないもの @keyframes cbig{ 0%{background-size:0% 0%;background-position:50% 50%;} 50%{background-size:100% 100%;background-position:0% 0%;} 100%{background-size:200% 200%;background-position:-100% -100%;} } .cbox{ width:300px;height:300px; b…

… CSSの3D表現とkeyframesによるアニメーション。組み合わせると色々面白い動きを作る事ができます^^ が、関連するプロパティが多く、またそれぞれを「どうすれば どうなるか」が分かりにくいところもあり、これから学ぼう、あるいは自分で考えた動きをさせてみようとされる方に「高いハードル」となっているのではないでしょうか。 そこで、微力ながら「手軽に設定変更でき、その設定がどう動きに反映されるのかを即時に見られるツール」を作成してみました。 CSS3Dアニメーションお試しツ…

…とがき ブランコ @keyframes swinga{ 0%{transform:rotateX(60deg);} 100%{transform:rotateX(-60deg);} } .swingwaku{ position:relative; float:left; width:100px; height:100px; transform-style:preserve-3d; perspective:300px; margin-left:20px; } .swing{ p…

…追記 フラフープ @keyframes hula{ 0%{transform:translateY(30px) rotateX(80deg) rotateZ(0deg);} 50%{transform:translateY(30px) rotateX(87deg) rotateZ(360deg);} 100%{transform:translateY(30px) rotateX(80deg) rotateZ(720deg);} } @keyframes hitohula{ 0…

…おまけ サンプル @keyframes grgra{ 0%,30%{transform:rotateX(-5deg) rotateY(360deg);} 100%{transform:rotateX(-5deg) rotateY(0deg);} } .grwk0{ position:relative; width:300px; text-align:center; border-radius:10px; border:10px double #88ee88; } .grwk{…

…がき 跳ねる画像 @keyframes boundimga1{ 0%{width:100px;} 100%{width:100%;} } @keyframes boundimga2{ 0%{background-position:0% 0%;} 100%{background-position:100% 0%;} } .boundimg{ height:50px; animation:boundimga1 16.5s linear infinite alternate,bou…

… なんとなく「２つのkeyframesアニメーションで、２つめの動きが１つめの動きの状態に影響されて変化するようなもの」を試してみたい と思いたち、作ってみると こういうものができました。 跳ねるボール コード ２つのアニメーション あとがき 跳ねるボール @keyframes dblanm1{ 0%{width:135px;} 100%{width:100%;} } @keyframes dblanm2{ 0%{background-position:0% 0%;} 100…

…ーン、ガシャン。 @keyframes wga{ 0%,23%{background-position:0px 0px,0px 0px;} 25%,48%{background-position:25px 0px,0px 0px;} 50%,73%{background-position:25px 0px,-25px 0px;} 75%,98%{background-position:25px 25px,-25px 0px;} 100%{background-position…

…おきましょうか。 @keyframes l2r{0%{left:0px;}100%{left:270px;}} @keyframes btb1{0%{top:200px;}50%{top:0px;}100%{top:100px;}} @keyframes btb2{0%{top:200px;}50%{top:50px;}100%{top:125px;}} @keyframes btb3{0%{top:200px;}50%{top:100px;}100%{top:150px;}…

…けによって変わるところですが）、それを右クリック→プログラムから開く→メモ帳 と進むと、ちゃんとSVGのコードとして保存されている事が確認できました^^ WordやExcelの図形挿入を使って描いた絵をSVGで保存できるとなると…色々面白い事ができそう（CSSのkeyframesアニメーションや、JavaScriptから絵の中の一部要素を変化させるとか）ですが…サブスク365以外にも実装されないかなぁ？ｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…ー（ブロック製） @keyframes santa{ 0%{background-position:200% 100px,0px 0px;} 100%{background-position:0% 300px,0px 0px;} } body{ background-image:linear-gradient(90deg,brown 7px,black 8px 10px,red 11px 15px,white 16px 26px,black 27px),linear-grad…

…うな気がしますｗ @keyframes linemovea{ 0%{background-position:0% 0%,100% 0%,100% 0%;} 100%{background-position:0% 0%,100% 0%,0% 0%;} } .linemove{ width:300px; height:186px; background-image: linear-gradient(-20deg,#000000ff 48%,#00000000 49% 51%,#0…

…に浮遊しています @keyframes kaiten1{ 0%{transform:rotateY(0deg) rotateZ(0deg);} 100%{transform:rotateY(360deg) rotateZ(360deg);} } @keyframes kaiten2{ 0%{transform:rotateY(120deg) rotateZ(120deg);} 100%{transform:rotateY(480deg) rotateZ(480deg);} }…

…き ブロック遊び @keyframes kaiten{ 0%,30%{transform:rotateX(-10deg) rotateY(-10deg);} 100%{transform:rotateX(-10deg) rotateY(350deg);} } #gamen{ position:relative; transform-style:preserve-3d; width:300px; height:300px; overflow:hidden; border:1px…

…水槽（作りかけ） @keyframes roundside{ 0%,30%{transform:rotateX(-20deg) rotateY(20deg) rotateZ(0deg);} 70%,100%{transform:rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);} } .box3d{ position:relative; transform-style:preserve-3d; width:200px; height:…

…ずCSSの指定で、@keyframesをざっくり削除しました。 次にanimationプロパティも削除し、 transition:1.5s;transform:rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); に置き換えています。 animationの代わりとなるのが「transition:1.5s;」で、これは「スタイル指定に変化があった時、1.5秒かけて徐々に変化するように」という指定です。※変化にかける時間1.5s以外の指定を…