CSS3 transition, transformを使用時に画像がぼやける | ふたえごのWEBテクニックブログ
現象が起きた内容 以下の条件のときに、画像がぼやける問題が発生しました。 CSS a, img, input, svg, *:before, *:after { transition: all 0.5s; } a:hover img, a:hover input, a.hover:hover, .btn a:hover, .btn input:hover { text-decoration: none; opacity: 0.8; } HTML <ul> <li><a href="https://futaego.com"><img src="/asset/images/logo01.png" alt="ふたえごブログ"></a></li> </ul> 問題が起きた理由 実際の問題がこのサイトで起きたわけではないですが、問題が起きたサイトのおそらくの理由はRetina対応による大きい画像を使
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld
コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
【CSS3】@keyframes と animation 関連のまとめ - Qiita
CSSでボーダーをボックスに沿って走らせる | UNORTHODOX WORKBOOK | Blog
CSSのみでボーダーをスタイリッシュにアニメーションさせる - Qiita
CSS 枠線アニメーションを作る - Qiita
#wrap{ height: 100%; display: flex; justify-content: center; align-items: center; background: #000; } .box{ position: relative; background: red; width: 300px; height: 300px; } .box:before,.box:after{ content: ''; position: absolute; height: 3px; width: 3px; background: #fff; transition: width 0.3s,height 0.3s; } .box:before{ top: 0; right: 0; box-shadow: -297px 0 0 0 #fff; /* 配置位置:親要素の大きさ(300) - 自
CSSで実装するボタンホバー時のボーダーアニメーションエフェクト - NxWorld
ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト | 株式会社WEB企画
css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました！ 1：丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね！ http://tympanus.net/codrops/2013/05/30/simple-icon-h
これ全部CSS!?驚くほど自由自在なCSSアニメーション20選
CSSアニメーションでゆらゆらさせる - Qiita
サンプル http://codepen.io/skwbr/full/JdJWqV （※横着してwebkitプレフィックスしかつけていないのでChromeからどうぞ...） 解説 フワフワというかゆらゆらというか宙に浮いているようなアニメーションをさせる場合。 <ul> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> </ul> @keyframes horizontal { 0% { transform:translateX( -3px); } 100% { transform:translateX( 0px); } } @keyframes verti
【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選
【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選 初心者向けにCSSで書けるアニメーションをまとめたサイトや記事を厳選して紹介しています。Webサイトの制作において重要なアニメーションですが、すぐ使えるサンプルをまとめているので、ぜひ参考にしてみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSのアニメーションをまとめたサイトや記事を紹介します。 サイトを作っていく上でアニメーションの実装は必須と
animation－CSS3リファレンス
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
CSSアニメーションの初歩をおさらい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
