Hatena Blog Tags
はてなブログ トップ
keyframes
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

keyframes

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
ソースコードを追いかけて•9ヶ月前

keyframesでアニメーションを設定する［記法］【CSS】【keyframes】

/*動画学習アウトプットです*/ ご参考程度に楽しんでいただければと思います♪ https://www.udemy.com*Udemy講座より ◆キーフレーム 基本的に0%〜100%のアニメーションの状態を記述する ［記法］ @keyframes アニメーションの名前 { 0% { 0%の時の内容 } 100% { 100%の時の内容 }} ☆50%など途中の動きも細かく設定できる 例）@keyframes kf-sampleanim { 0% { transform: scale(0); } 50% { transform: scale(2); } 100% { transform: sca…

#プログラミング学習#CSS#animation#keyframes#WEBサイト作成

ネットで話題

もっと見る
78ブックマーク【CSS3】@keyframes と animation 関連のまとめ - Qiitaqiita.com
72ブックマークkeyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作liginc.co.jp
67ブックマークKeyframes.appkeyframes.app
59ブックマークCSS3 Keyframes Animation GeneratorChoose example to load into generator. After example selected - you can press play button to see how it acts. Also you can adapt example for your needs by editing properties/settings with generator.cssanimate.com
42ブックマーク@keyframesとAndroidblog.webcreativepark.net
27ブックマークkeyframesを使ったアニメーションを実装するCSS3コードをオンラインで生成出来る・Stylie - かちびと.netkachibito.net
22ブックマークCSS Animation Keyframes from a SVG Pathm 150 50 c 0 50 35 65 70 30 c -35 35 -20 70 30 70 c -50 0 -65 35 -30 70 c -35 -35 -70 -20 -70 30 c 0 -50 -35 -65 -70 -30 c 35 -35 20 -70 -30 -70 c 50 0 65 -35 30 -70 c 35 35 70 20 70 -30 l 0 50 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 l 0 -50 /* Apply the animation to the target element. */ /* Ha...csspathanimation.calyptus.eu
17ブックマークCSSでアニメーションを作ろう！”keyframes”について解説！ - Qiitaqiita.com
13ブックマークFirefox5でCSSの@keyframesにクオートがあると動かない件について - Webtech Walkerwebtech-walker.com

関連ブログ

Little Strange Software•3年前

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

どうも！LSSです！！ わざわざお姫様の画像を描いてまで作ったネタ、 little-strange.hatenablog.com お姫様の画像にしたのは、「高貴な身分の方の、ちょっとかがんだお辞儀」のような動きになるかな？と思ったからですが、出来上がった動きが「やはりどう見てもスクワット」でしたｗ 画像の作り方によっても違ってくるのかもですが、コードのほうでなんとかもう少し「お辞儀」らしくならないかな？と考えてみました。 姫のお辞儀 マウスホバーで「ごきげんよう」 ざっくり解説 姫のお辞儀 @keyframes ozga{ 0%,30%{height:200px;} 90%,100%{heig…

#CSS#keyframes#backgroundプロパティ
Little Strange Software•3年前

【CSS】姫のスクワット（？）

どうも！LSSです！！ little-strange.hatenablog.com ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 little-strange.hatenablog.com で使った方法をまた用いてみました。 そして、勢いで２パターン作ったので公開します^^ お姫様のお辞儀かと思ったらやっぱりスクワット ノリノリの姫 あとがき お姫様のお辞儀かと思ったらやっぱりスクワット @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } …

#CSS#keyframes#background#リズム
Little Strange Software•3年前

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

どうも！LSSです！！ CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、「着地して跳ね返る時に横長にひしゃげる」という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色々… 跳ね続けるボールとfloat:left; @keyframes bnda{ 0%,100%{background-position:0 0;} 50%{background-position:0 100%;} 0%,47%,57%,100%{background-size:30px 30px;} 50%{background-siz…

#CSS#小ネタ#keyframes
Little Strange Software•3年前

【CSS】謎リズムアニメーション

どうも！LSSです！！ 「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:100% 100%;} 62.5%,75%,87.5%{background-position:100%…

#CSS#keyframes#謎CSS
Little Strange Software•3年前

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

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

#CSS#keyframes#animation
Little Strange Software•3年前

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

どうも！LSSです！！ ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),…

#CSS#keyframes#区切り線
Little Strange Software•3年前

【CSS】また流星群（今度は線形）

どうも！LSSです！！ 先日、【CSS】流星群というCSSアニメーションネタを公開しました。 光の点が斜めに移動する、というものでしたが 残念なこと - 私の好きなバラとシェルティー の影響を受け、「尾を引いて線状になった流れ星」を自分なりに考えてみました^^ また流星群 コード 仕組み あとがき また流星群 @keyframes shtstra{ 0%{background-position-y:0,100%;} 50%,100%{background-position-y:0,0%;} } @keyframes shtstrb{ 0%,10%{background-position-x:0…

#CSS#透過グラデーション#keyframes#animation
Little Strange Software•3年前

【CSS】疑似３D【実験】

どうも！LSSです！！ CSSには３Dを表現するためのプロパティが用意されています。 参考：【CSS】ブロック遊び【実験】 - Little Strange Software が、少々欠点もあって…例えば「球」を表現するのが苦手だったりもするんですね。 一方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、 これも３D回転させると平面の円である事が露呈してしまいます。 今回は実験的に「CSSの3D表現を使わず、疑似的に３Dっぽい動きを表現」する事に挑戦してみました。 疑似３D コード 遅延の値を変更してみるのも面白いかも 疑似３D @keyframes d3dax{…

#CSS#background-position-x#keyframes#radial-gradient