…りゃｗ 彗星の尾 @keyframes wa1a{ 0%{transform:rotate(0deg);} 100%{transform:rotate(-360deg);} } @keyframes wa2a{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .wa1{ box-sizing:border-box; width:250px;height:250px;/*外枠の大きさ 調整可*/ bor…

…CSSで疑似乱数 @keyframes rndma{ 0%{left:0px;} 100%{left:-600px;} } .rndm{ position:relative; width:100px; height:60px; border-radius:10px; border:10px outset #ccffaa; background-color:#bbee99; box-sizing:border-box; text-align:center; overflow:h…

…転がしてみよう！ @keyframes kaiten{ 0%,10%{transform:rotateX(10deg) rotateY(10deg) rotateZ(0deg);} 15%,25%{transform:rotateX(10deg) rotateY(-80deg) rotateZ(0deg);} 30%,40%{transform:rotateX(-100deg) rotateY(0deg) rotateZ(-10deg);} 45%,55%{transform…

…ね サイコロ回転 @keyframes kaiten{ 0%,10%{transform:rotateX(10deg) rotateY(10deg) rotateZ(0deg);} 15%,25%{transform:rotateX(10deg) rotateY(-80deg) rotateZ(0deg);} 30%,40%{transform:rotateX(-100deg) rotateY(0deg) rotateZ(-10deg);} 45%,55%{transform…

…転アニメーション @keyframes bgcnca{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .bgcnc{ position:relative; width:300px; height:200px; overflow:hidden; } .ibgcnc{ position:absolute; top:-150px; left:-100px; width:500px; height:500p…

…ド <style>@keyframes hlwna{0%,100%{top:-100%;}50%,90%{top:0%;}}.hlwn{position:fixed;left:0px;z-index:100;background-color:#880000;width:100%;height:100%;animation:hlwna 30s ease 10s 1;}</style><div class="hlwn"> </div> なんだか、ひどいものが出来てしまいました^^…

…試みてみましたｗ @keyframes pdwa{ 0%{top:0px;} 100%{top:100px;} } .pdw{position:relative;height:120px;} .pdws{ position:relative; animation:pdwa linear infinite alternate; display:inline-block; width:12px;height:12px; } .pdws:nth-child(4n+1){backgr…

…みるとこんな感じ @keyframes ltrspca{ 0%,50%,100%{letter-spacing:0.1em;} 60%,80%{letter-spacing:-0.3em;} 70%{letter-spacing:40em;} 90%{letter-spacing:1em;} } .ltrspc{ height:2em; padding:0.5em; overflow:hidden; animation:ltrspca 10s linear 0s infini…

@keyframes cncglda{ 0%,20%{background-position:0px 0px;}/*経過時間0～20%までの位置*/ 80%,100%{background-position:-5700px -3800px;}/*経過時間80～100%までの位置*/ } .cncgld{ width:300px; height:200px; background-image:repeating-conic-gradient(from 0deg at 50% 5…

…して出てくる文字 @keyframes rtxta{ 0%,30%{transform:rotate(180deg);} 40%,60%{transform:rotate(0deg);} 70%,100%{transform:rotate(-180deg);} } .rtxtout{ position:relative; overflow:hidden; width:100%; height:60px; } .rtxtin{ position:absolute; left:1…

…ントラストの鼓動 @keyframes anmfkt1a{ 0%,50%,100%{filter:contrast(100%);} 80%{filter:contrast(300%);} } .anmfkt1{animation:anmfkt1a 5s linear 0s infinite;} 今度はマウスカーソル関係なく、延々と「５秒周期でコントラストが異様に高くなる」のを繰り返すサンプルです。 transitionではなく、@keyframesとanimationを使用し…

…ぶ以前から、CSSのkeyframesを使ったアニメーションを色々試していましたが、最近になって「え、こんなの出来るんだ！？」と知ったものがありますｗ カチコチ動くアニメーション コード animation-timing-functionの「steps」 ちなみに… カチコチ動くアニメーション @keyframes anmstpa{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .anmstp{ d…

…; txt='\n@keyframes moyaa{\n'; for(i=0;i\n'; txt+='\n'; gamen.innerHTML=txt; codexxx.innerHTML=txt.replace(/&/g,'&').replace(//g,'>').replace(/\n/g,''); どうも！LSSです！！ ブログの下書きには、「書き始めたけどうまくまとめられなかった記事」や「作ってみたけど説明が困難な記事」、「書いたけど意味が分からないもの」などが残りが…

…メーション飾り罫 @keyframes dotkeia{ 0%,80%{background-position:20px 0px,60px 0px;} 85%{background-position:20px 0px,20px -10px;} 90%{background-position:20px 0px,-20px 0px;} 95%{background-position:60px 10px,-20px 0px;} 100%{background-position:10…

どうも！LSSです！！ 今日は、ちょっと目的があって三宮をぶらついてきました。 まずは腹ごしらえ！ 続いて向かうは さんセンタープラザ 調査開始！ 初iPhone！ 触ってみた感想 ブログの動作確認 まずは腹ごしらえ！ まずは昼食です。 ランチメニュー「大盛焼肉定食」！と、写真の撮り方が下手で伝わらないかもですが、結構ボリュームあります。なお、写真右に見切れていますがポテサラがついていますｗ ランチタイム以外は食べ放題がメインのお店ですが、ランチ時のこれもボリュームは十分あっ…

…発しますよ コード keyframesアニメーションも慣れてくると はてなブログのお題が… 爆発しますよ @keyframes bkhta{ 0%,70%{text-shadow:none;} 71%,100%{text-shadow:0px 0px 0px yellow,0px 0px 0px yellow,0px 0px 2px red;} 85%{text-shadow:0px 0px 30px orange,0px 0px 30px orange,0px 0px 60…

…tyle><!--@keyframes bfrnda1{0%,20%{transform:rotate(0deg) translateX(0px) scale(1);}60%{transform:rotate(360deg) translateX(70px) scale(4);}100%{transform:rotate(720deg) translateX(0px) scale(1);}}@keyframes bfrnda2{0%,30%{transform:rotate(…

…tyle><!--@keyframes bfrnda{0%,30%{transform:rotate(0deg) translateX(0px);}65%{transform:rotate(900deg) translateX(70px);}100%{transform:rotate(1800deg) translateX(0px);}}.bfrnd:before{content:"＊";display:inline-block;transform-origin:0% 50%…

…2:30deg;}@keyframes txtanm1a{0%,20%{--txtanm1op1:0;--txtanm1op2:0;--txtanm1y1:-90deg;--txtanm1y2:90deg;}21%,40%{--txtanm1op1:1;--txtanm1op2:0;--txtanm1y1:0deg;--txtanm1y2:90deg;}41%,80%{--txtanm1op1:1;--txtanm1op2:1;--txtanm1y1:0deg;--txtan…

…txtop:0;}@keyframes tbds{0%{top:-20%;left:100%;}30%{top:5%;left:2%;}31%{top:5%;left:8%;}32%{top:5%;left:3%;}33%{top:5%;left:7%;}34%{top:5%;left:4%;}35%{top:5%;left:6%;}36%{top:5%;left:5%;}37%{--txtop:0;}50%{--txtop:1;}69%{--txtop:0;}70%{top…

…tyle><!--@keyframes tbds{0%{top:-20%;left:100%;}30%{top:5%;left:2%;}31%{top:5%;left:8%;}32%{top:5%;left:3%;}33%{top:5%;left:7%;}34%{top:5%;left:4%;}35%{top:5%;left:6%;}36%{top:5%;left:5%;}70%{top:5%;left:5%;}80%{top:-20%;left:-100%;}100%{to…

…tyle><!--@keyframes tbds{0%{top:-20%;left:100%;}30%{top:0%;left:0%;}70%{top:0%;left:0%;}100%{top:20%;left:-100%;}}--></style><div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden; background-color: #ddddee;"><di…

…tyle><!--@keyframes goldanm{0%{background-position:0px 0px;}100%{background-position:2000px 0px;}}.golda{font-size: 50px;font-weight: bold;color: gold;filter:drop-shadow(1px 1px 0px black);background-image:linear-gradient(90deg, brown,yello…

…tyle><!--@keyframes txtshda{0%{text-shadow:0px 0px 10px #ff0000;}70%{text-shadow:0px 0px 10px #ff0000;}100%{text-shadow:0px 0px 100px #ff0000;}}.txtshd{font-weight:bold;font-size:150%;animation:txtshda 3s linear 0s infinite alternate; }--><…

…tyle><!--@keyframes katakata3d{0%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}80%{transform:perspective(100px) translateZ(0px) rotateY(0deg) rotateZ(-10deg);}85%{transform:perspective(100px) translateZ(0px) r…

…tyle><!--@keyframes knanm{0%{outline:0px #ffd400ff solid;}100%{outline:50px #ffd40000 solid;}}.frmk{transform: perspective(100px) translateZ(-30px) rotateY(-8deg);transform-origin:80% 50%;width: 300px;border: 1px solid black;font-size: 40px…

…tyle><!--@keyframes snrtanm{0%{background-position:0px 0px;}60%{background-position:120px -270px;}100%{background-position:60px -540px;}}.snrta{font-size: 100px;font-weight: bold;color: black;background-size:60px 60px;background-image:radia…

…tyle><!--@keyframes goldanm{0%{background-position:0px 0px;}100%{background-position:2000px 0px;}}.golda{font-size: 50px; font-weight: bold; color: gold;background-image:linear-gradient(90deg, brown,yellow,white,yellow,brown);-webkit-backgr…

…ソルをあわせる）などのマウス操作になるんですね。 「animation」を使用する場合、予めCSS内で「keyframes」というものを設定する事になります。 「keyfames」の参考記事は↓こちら！ また、ググるともっと詳しく解説されているサイトが見つかると思います^^ あと、今回紹介した各サンプルで色を自由に設定するようオススメしていますが、CSSの色指定について記事にしたものが↓こちらとなります。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…tyle><!--@keyframes scha{0%{background-color:#000000;background-position:-1000px 0,1000px 0;}10%{background-position:1000px 0,1000px 0;}30%{background-position:-1000px 0,1000px 0;}35%{background-position:0px 0,0px 0;}50%{background-color:#0…