Step By Work

大阪のホームページ制作会社

お問い合わせ 06-6809-1083
トップ ブログ コーディング関連 今日の小ネタ：transitionについて

今日の小ネタ：transitionについて

Date: 2017.04.06
Update: 2020.02.24

執筆･監修

上杉 洋　Hiroshi Uesugi

1991年生まれ。 株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

CSS3で実装されたtransitionプロパティについて

.animation {
    transition: opacity .4s ease;
}
.animation:hover {
    opacity: 0.6;
}

こんな感じでa要素のホバー時に手軽に透過アニメーションをさせることができますが





.animation:hover {
    transition: opacity .4s ease;
    opacity: 0.6;
}




アニメーション後の方にtransitionを記述しても問題ないです。


って思ったけど、ホバー解除した場合にアニメーションが適用されないですね。。。
Jqueryでアニメーションをしている要素にtransitionでの制御もしていると動きがおかしくなるのでその対処法として使うことがります。
          

          

            
この記事へのコメント 0件


            

              

                

                  

                    
                    
                  

                  

                    
                    
                  

                

                

                  
                

                

                  
                

                
                
              

            

                      

          

            
              
              ←TwitterでもWEB関連の情報発信しています！！
            
          


                  

        

          

            

              
オールインワンで集客できる

                格安ホームページ制作会社です！
              

              
株式会社ステップバイワークに関する資料をご希望の際は、

                以下公式LINEかお問い合わせフォームからご連絡ください。

              

                LINEで資料請求
                  
                    
                  
                
                フォームから資料請求
                    
                    
                  
              

            

          

        


      

                  

        

          
新着記事