CSS私はフォーカス効果のための助けを必要と効果

Question

body{ 
 
    font-family: 'Kanit', sans-serif; 
 
    letter-spacing:0.5em; 
 
    font-size:2em; 
 
    background:#69797E; 
 
} 
 
.center{ 
 
    margin:1% auto; 
 
    width:600px; 
 
    text-align:center; 
 
    position:relative; 
 
} 
 

 
.buton{ 
 
    color:#333; 
 
    background:#fff; 
 
    font-size:1.1em; 
 
    text-decoration:none; 
 
    padding:1em; 
 
    position:relative; 
 
    display:block; 
 
    cursor:pointer; 
 
    -webkit-transition:500ms all ease; 
 
    -moz-transition:500ms all ease; 
 
    -o-transition:500ms all ease ; 
 
    transition:500ms ease; 
 
} 
 

 
.hover::after,.hover::before, 
 
.text::before,.text::after{ 
 
    content:''; 
 
    box-sizing:border-box; 
 
    position:absolute; 
 
    background:#FF4343; 
 
    -webkit-transition:500ms all ease-out ; 
 
    -moz-transition:500ms all ease-out ; 
 
    -o-transition:500ms all ease-out ; 
 
    transition: 500ms all ease-out; 
 
} 
 

 
.hover::after{ 
 
    right:0; 
 
    bottom:0; 
 
    width:0; 
 
} 
 

 
.hover::before{ 
 
    right:0; 
 
    bottom:0; 
 
    height:0; 
 
} 
 

 
.text::after{ 
 
    top:0; 
 
    left:0; 
 
    width:0px; 
 
} 
 

 
.text::before{ 
 
    top:0; 
 
    left:0; 
 
    height:0px; 
 
} 
 

 
.buton:hover .hover::after{ 
 
    width:100%; 
 
    height:3px; 
 
} 
 

 
.buton:hover .text::after{ 
 
    width:100%; 
 
    height:3px; 
 
} 
 

 
.buton:hover .text::before{ 
 
    height:100%; 
 
    width:3px; 
 
} 
 

 
.buton:hover .hover::before{ 
 
    height:100%; 
 
    width:3px; 
 
} 
 

 
.buton:hover .text, 
 
.buton:hover .fa-home{ 
 
    color:#FF4343; 
 
} 
 

 
.buton:hover .fa-home{ 
 
    -webkit-animation-name: spin; 
 
    -webkit-animation-duration: 300ms; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease-out; 
 
} 
 

 
@-webkit-keyframes spin { 
 
    from { -webkit-transform: rotate(0deg); } 
 
    to { -webkit-transform: rotate(360deg); } \t 
 
} 
 

 
/***********************************************/ 
 

 
.hover2::after,.hover2::before, 
 
.text2::before,.text2::after{ 
 
    content:''; 
 
    position:absolute; 
 
    background:#9A0089; 
 
} 
 

 

 
.hover2::after{ 
 
    right:0; 
 
    bottom:0; 
 
    width:0; 
 
    -webkit-transition:350ms all ease-out ; 
 
    -moz-transition:350ms all ease-out ; 
 
    -o-transition:350ms all ease-out ; 
 
    transition: 350ms all ease-out; 
 
} 
 

 
.text2::before{ 
 
    bottom:0; 
 
    left:0; 
 
    height:0px; 
 
    -webkit-transition:350ms all ease-out 350ms ; 
 
    -moz-transition:350ms all ease-out 350ms; 
 
    -o-transition:350ms all ease-out 350ms ; 
 
    transition: 350ms all ease-out 350ms; 
 
} 
 

 
.hover2::before{ 
 
    right:0; 
 
    top:0; 
 
    height:0; 
 
    -webkit-transition:350ms all ease-out 1050ms ; 
 
    -moz-transition:350ms all ease-out 1050ms ; 
 
    -o-transition:350ms all ease-out 1050ms ; 
 
    transition: 350ms all ease-out 1050ms; 
 
} 
 

 
.text2::after{ 
 
    top:0; 
 
    left:0; 
 
    width:0px; 
 
    -webkit-transition:350ms all ease-out 700ms ; 
 
    -moz-transition:350ms all ease-out 700ms ; 
 
    -o-transition:350ms all ease-out 700ms ; 
 
    transition: 350ms all ease-out 700ms; 
 
} 
 

 

 

 
.buton:focus .hover2::after{ 
 
    width:100%; 
 
    height:3px; 
 
} 
 

 
.buton:focus .text2::after{ 
 
    width:100%; 
 
    height:3px; 
 
} 
 

 
.buton:focus .text2::before{ 
 
    height:100%; 
 
    width:3px; 
 
} 
 

 
.buton:focus .hover2::before{ 
 
    height:100%; 
 
    width:3px; 
 
} 
 

 
.buton:focus .text2, 
 
.buton:focus .fa-graduation-cap{ 
 
    color:#9A0089; 
 
} 
 

 
.buton:focus .fa-graduation-cap{ 
 
    -webkit-animation-name: up; 
 
    -webkit-animation-duration: 900ms; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease-out; 
 
} 
 

 
@-webkit-keyframes up { 
 
    from { 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 

 
    10%, 20% { 
 
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
    } 
 

 
    30%, 50%, 70%, 90% { 
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
    } 
 

 
    40%, 60%, 80% { 
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
    } 
 

 
    to { 
 
    transform: scale3d(1, 1, 1); 
 
    } 
 
} 
 
\t 
 
}

<!--FA--> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<!--FONT--> 
 
<link href="https://fonts.googleapis.com/css?family=Kanit:300" rel="stylesheet"> 
 

 

 
<div class="center"> 
 
    
 
<span class="buton"> 
 
    <i class="fa fa-home"></i> 
 
    <span class="hover"></span> 
 
    <span class="text">HOVER EFFECT</span> 
 
</span> 
 
    </br> 
 
<a href="#" class="buton"> 
 
    <i class="fa fa-graduation-cap"></i> 
 
    <span class="hover2"></span> 
 
    <span class="text2">CLICK EFFECT</span> 
 
</a> 
 

 
</div>

をクリックします。初めてフォーカスアニメーションが正常に機能しています。しかし、2回3回は壊れています。それをどうやって解決できるか。

あなたにはもう1つ質問があります。私のCSSコードは非常に複雑ですね。私はフレームワークを使用しますが、どちらを選択するかは決めることができません。より少ないか嫌なのはなぜですか？

Answer 1

あなたが望むことを簡単に行うには、2番目のボタンをぼかしている間にすべてのエフェクトを削除して、次の時間にすべてのアニメーションが実行されていることを確認してください。

body { 
 
     font-family: 'Kanit', sans-serif; 
 
     letter-spacing: 0.5em; 
 
     font-size: 2em; 
 
     background: #69797E; 
 
    } 
 
    
 
    .center { 
 
     margin: 1% auto; 
 
     width: 600px; 
 
     text-align: center; 
 
     position: relative; 
 
    } 
 
    
 
    .buton { 
 
     color: #333; 
 
     background: #fff; 
 
     font-size: 1.1em; 
 
     text-decoration: none; 
 
     padding: 1em; 
 
     position: relative; 
 
     display: block; 
 
     cursor: pointer; 
 
     -webkit-transition: 500ms all ease; 
 
     -moz-transition: 500ms all ease; 
 
     -o-transition: 500ms all ease; 
 
     transition: 500ms ease; 
 
    } 
 
    
 
    .hover::after, 
 
    .hover::before, 
 
    .text::before, 
 
    .text::after { 
 
     content: ''; 
 
     box-sizing: border-box; 
 
     position: absolute; 
 
     background: #FF4343; 
 
     -webkit-transition: 500ms all ease-out; 
 
     -moz-transition: 500ms all ease-out; 
 
     -o-transition: 500ms all ease-out; 
 
     transition: 500ms all ease-out; 
 
    } 
 
    
 
    .hover::after { 
 
     right: 0; 
 
     bottom: 0; 
 
     width: 0; 
 
    } 
 
    
 
    .hover::before { 
 
     right: 0; 
 
     bottom: 0; 
 
     height: 0; 
 
    } 
 
    
 
    .text::after { 
 
     top: 0; 
 
     left: 0; 
 
     width: 0px; 
 
    } 
 
    
 
    .text::before { 
 
     top: 0; 
 
     left: 0; 
 
     height: 0px; 
 
    } 
 
    
 
    .buton:hover .hover::after { 
 
     width: 100%; 
 
     height: 3px; 
 
    } 
 
    
 
    .buton:hover .text::after { 
 
     width: 100%; 
 
     height: 3px; 
 
    } 
 
    
 
    .buton:hover .text::before { 
 
     height: 100%; 
 
     width: 3px; 
 
    } 
 
    
 
    .buton:hover .hover::before { 
 
     height: 100%; 
 
     width: 3px; 
 
    } 
 
    
 
    .buton:hover .text, 
 
    .buton:hover .fa-home { 
 
     color: #FF4343; 
 
    } 
 
    
 
    .buton:hover .fa-home { 
 
     -webkit-animation-name: spin; 
 
     -webkit-animation-duration: 300ms; 
 
     -webkit-animation-iteration-count: 1; 
 
     -webkit-animation-timing-function: ease-out; 
 
    } 
 
    
 
    @-webkit-keyframes spin { 
 
     from { 
 
      -webkit-transform: rotate(0deg); 
 
     } 
 
     to { 
 
      -webkit-transform: rotate(360deg); 
 
     } 
 
    } 
 
    /***********************************************/ 
 
    
 
    .hover2::after, 
 
    .hover2::before, 
 
    .text2::before, 
 
    .text2::after { 
 
     content: ''; 
 
     position: absolute; 
 
     background: #9A0089; 
 
    } 
 
    
 
    .hover2::after { 
 
     right: 0; 
 
     bottom: 0; 
 
     width: 0; 
 
     -webkit-transition: 350ms all ease-out; 
 
     -moz-transition: 350ms all ease-out; 
 
     -o-transition: 350ms all ease-out; 
 
     transition: 350ms all ease-out; 
 
    } 
 
    
 
    .text2::before { 
 
     bottom: 0; 
 
     left: 0; 
 
     height: 0; 
 
     -webkit-transition: 350ms all ease-out 350ms; 
 
     -moz-transition: 350ms all ease-out 350ms; 
 
     -o-transition: 350ms all ease-out 350ms; 
 
     transition: 350ms all ease-out 350ms; 
 
    } 
 
    
 
    .hover2::before { 
 
     right: 0; 
 
     top: 0; 
 
     height: 0; 
 
     -webkit-transition: 350ms all ease-out 1050ms; 
 
     -moz-transition: 350ms all ease-out 1050ms; 
 
     -o-transition: 350ms all ease-out 1050ms; 
 
     transition: 350ms all ease-out 1050ms; 
 
    } 
 
    
 
    .text2::after { 
 
     top: 0; 
 
     left: 0; 
 
     width: 0; 
 
     -webkit-transition: 350ms all ease-out 700ms; 
 
     -moz-transition: 350ms all ease-out 700ms; 
 
     -o-transition: 350ms all ease-out 700ms; 
 
     transition: 350ms all ease-out 700ms; 
 
    } 
 
    
 
    .buton:focus .hover2::after { 
 
     width: 100%; 
 
     height: 3px; 
 
    } 
 
    
 
    .buton:focus .text2::after { 
 
     width: 100%; 
 
     height: 3px; 
 
    } 
 
    
 
    .buton:focus .text2::before { 
 
     height: 100%; 
 
     width: 3px; 
 
    } 
 
    
 
    .buton:focus .hover2::before { 
 
     height: 100%; 
 
     width: 3px; 
 
    } 
 

 
    .buton:not(:focus) .hover2::after, 
 
    .buton:not(:focus) .text2::after, 
 
    .buton:not(:focus) .text2::before, 
 
    .buton:not(:focus) .hover2::before 
 
    { 
 
    \t width: 0; 
 
    \t height: 0; 
 
    \t -webkit-transition: none; 
 
     -moz-transition: none; 
 
     -o-transition: none; 
 
     transition: none; 
 
    } 
 
    
 
    .buton:focus .text2, 
 
    .buton:focus .fa-graduation-cap { 
 
     color: #9A0089; 
 
    } 
 
    
 
    .buton:focus .fa-graduation-cap { 
 
     -webkit-animation-name: up; 
 
     -webkit-animation-duration: 900ms; 
 
     -webkit-animation-iteration-count: 1; 
 
     -webkit-animation-timing-function: ease-out; 
 
    } 
 
    
 
    @-webkit-keyframes up { 
 
     from { 
 
      transform: scale3d(1, 1, 1); 
 
     } 
 
     10%, 
 
     20% { 
 
      transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
 
     } 
 
     30%, 
 
     50%, 
 
     70%, 
 
     90% { 
 
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 
 
     } 
 
     40%, 
 
     60%, 
 
     80% { 
 
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 
 
     } 
 
     to { 
 
      transform: scale3d(1, 1, 1); 
 
     } 
 
    }

<!--FA--> 
 
\t <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
\t <!--FONT--> 
 
\t <link href="https://fonts.googleapis.com/css?family=Kanit:300" rel="stylesheet"> 
 

 

 
\t <div class="center"> 
 
\t 
 
\t <span class="buton"> 
 
\t <i class="fa fa-home"></i> 
 
\t <span class="hover"></span> 
 
\t <span class="text">HOVER EFFECT</span> 
 
\t </span> 
 
\t </br> 
 
\t <a href="#" class="buton"> 
 
\t <i class="fa fa-graduation-cap"></i> 
 
\t <span class="hover2"></span> 
 
\t <span class="text2">CLICK EFFECT</span> 
 
\t </a> 
 

 
\t </div>

したいこれは？