css3アニメーション開発ノート_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3アニメーション開発ノート_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:46:08

オリジナル

1077 人が閲覧しました

アニメーションのスライドアウト効果

まず DMEO を見てみましょう。
ボタンのサイズには拡大効果があります。これを実現するには、transform:scale メソッドを使用します。ズーム処理中に、ボタンの位置が右から左に移動します。この効果は、ボタンが最初に表示されたときの唐突な感じを避けるために、ボタンを非表示にするために、不透明度 0 を使用して、ボタンの移動に応じて不透明度の値を徐々に 1 に変更することで実現できます。合計のコードは次のとおりです:

@keyframes fade {    from{ background: rgba(62, 191, 36, 1); transform: scale(0.5); left: 146px;}    50%{ background: rgba(62, 191, 36, 1);}    to{ background: rgba(62, 191, 36, 1); transform: scale(1); left: 0;} }

ログイン後にコピー

次に、ライト効果が続きます。ライトの幅は 0 から 178 まで変化し、透明度は 0 から 1 まで変化します。
ライトフレームアニメーション:

@keyframes shadow {    from{ width: 0; opacity: 0;}    to{ width: 178px; opacity: 1;} }

ログイン後にコピー

最後に、調整を維持するためにアニメーションの長さと遅延時間を調整します:

.ani1 .shadow{    -webkit-animation-name:shadow;/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: .8s;/*动画持续时间*/     -webkit-animation-timing-function: linear;迟时间*/     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/     -webkit-animation-fill-mode: forwards;  }  .ani1 .icons{    -webkit-animation-name: fade;/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: 0.75s;/*动画持续时间*/     -webkit-animation-timing-function: linear; /*动画频率，和transition-timing-function是一样的*/     -webkit-animation-delay: .2s;/*动画延迟时间*/     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/     -webkit-animation-fill-mode: forwards;  }

ログイン後にコピー

さらに、同様のエフェクトの 2 つの実装が投稿されています: DMEO1、DEMO2