CSS3アニメーション

Question

私はバーを展開するCSS3アニメーションを使用しましたが、問題はPRECENTAGEは、@キーフレーム・コードに挿入する必要があるということです。 HTMLでは、カスタム幅がインラインCSSとして挿入されます。

@keyframeに挿入されたものではなく、インラインCSSの幅にアニメーションを付ける方法はありますか？

#dataanalysis td figure { 
 
    animation: aw 2s normal; 
 
} 
 

 
@keyframes aw { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
} 
 
#dataanalysis { 
 
    width: 100%; 
 
    margin-top: 3rem; 
 
    background: #26272b; 
 
    color: white; 
 
    border-collapse: collapse; 
 
    font-size: .7rem; 
 
    font-weight: 300; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 
#dataanalysis td { 
 
    border: solid 1px black; 
 
    padding: .5rem; 
 
    word-wrap: break-word; 
 
    height: 25px; 
 
} 
 
#dataanalysis td:first-child { 
 
    width: 140px; 
 
    padding-left: .5rem; 
 
} 
 
#dataanalysis td:nth-child(2n) { 
 
    border-right: none; 
 
} 
 
#dataanalysis td:last-child { 
 
    text-align: right; 
 
    width: 25px; 
 
    border-left: none; 
 
} 
 
#dataanalysis td figure { 
 
    background: linear-gradient(to right, #f24f37 0%, #cd2134 100%); 
 
    height: .8rem; 
 
    margin: 0 0 0 .5rem; 
 
    border-radius: 0.3rem; 
 
    border: 1px solid black; 
 
} 
 
#dataanalysis td img { 
 
    width: .8rem; 
 
    padding-left: .8rem; 
 
}

<table id="dataanalysis"> 
 
      <tbody> 
 
       <tr> 
 
       <td>Acousticness 
 
        <a href="#" data-tooltip="A confidence measure from 0.0 to 1.0 of whether the track is acoustic. 1.0 represents high confidence the track is acoustic."><img src="/assets/img/info.svg" alt="tip"></a> 
 
       </td> 
 
       <td><figure style="width:87%"></figure></td><td>87%</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Danceability 
 
        <a href="#" data-tooltip="Danceability describes how suitable a track is for dancing based on a combination of musical elements including tempo, rhythm stability, beat strength, and overall regularity. A value of 0.0 is least danceable and 1.0 is most danceable."><img src="/assets/img/info.svg" alt="tip"></a> 
 
       </td> 
 
       <td><figure style="width:15%"></figure></td><td>15%</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Energy 
 
        <a href="#" data-tooltip="Energy is a measure from 0.0 to 1.0 and represents a perceptual measure of intensity and activity. Typically, energetic tracks feel fast, loud, and noisy. For example, death metal has high energy, while a Bach prelude scores low on the scale. Perceptual features contributing to this attribute include dynamic range, perceived loudness, timbre, onset rate, and general entropy."><img src="/assets/img/info.svg" alt="tip"></a> 
 
       </td> 
 
       <td><figure style="width:49%"></figure></td><td>49%</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Instrumentalness 
 
        <a href="#" data-tooltip="Predicts whether a track contains no vocals. "Ooh" and "aah" sounds are treated as instrumental in this context. Rap or spoken word tracks are clearly "vocal". The closer the instrumentalness value is to 1.0, the greater likelihood the track contains no vocal content. Values above 0.5 are intended to represent instrumental tracks, but confidence is higher as the value approaches 1.0."><img src="/assets/img/info.svg" alt="tip"></a> 
 
       </td> 
 
       <td><figure style="width:32%"></figure></td><td>32%</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Liveness 
 
        <a href="#" data-tooltip="Detects the presence of an audience in the recording. Higher liveness values represent an increased probability that the track was performed live. A value above 0.8 provides strong likelihood that the track is live."><img src="/assets/img/info.svg" alt="tip"></a> 
 
       </td> 
 
       <td><figure style="width:65%"></figure></td><td>65%</td> 
 
       </tr> 
 
       <tr> 
 
       <td>speechiness 
 
        <a href="#" data-tooltip="Speechiness detects the presence of spoken words in a track. The more exclusively speech-like the recording (e.g. talk show, audio book, poetry), the closer to 1.0 the attribute value. Values above 0.66 describe tracks that are probably made entirely of spoken words. Values between 0.33 and 0.66 describe tracks that may contain both music and speech, either in sections or layered, including such cases as rap music. Values below 0.33 most likely represent music and other non-speech-like tracks."><img src="/assets/img/info.svg" alt="tip"></a> 
 
       </td> 
 
       <td><figure style="width:11%"></figure></td><td>11%</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Valence/Happiness 
 
        <a href="#" data-tooltip="A measure from 0.0 to 1.0 describing the musical positiveness conveyed by a track. Tracks with high valence sound more positive (e.g. happy, cheerful, euphoric), while tracks with low valence sound more negative (e.g. sad, depressed, angry)."><img src="/assets/img/info.svg" alt="tip"></a> 
 
       </td> 
 
       <td><figure style="width:91%"></figure></td><td>91%</td> 
 
      </tbody> 
 
      </table>

Answer 1

あなただけ@keyframesからアニメーションの100%部分を削除する必要があり、アニメーションの最終段階は、インラインstyle属性でwidthセットに由来すると表示されます。

#dataanalysis td figure { 
 
    animation: aw 2s normal; 
 
} 
 
@keyframes aw { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
} 
 
#dataanalysis { 
 
    width: 100%; 
 
    margin-top: 3rem; 
 
    background: #26272b; 
 
    color: white; 
 
    border-collapse: collapse; 
 
    font-size: .7rem; 
 
    font-weight: 300; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 
#dataanalysis td { 
 
    border: solid 1px black; 
 
    padding: .5rem; 
 
    word-wrap: break-word; 
 
    height: 25px; 
 
} 
 
#dataanalysis td:first-child { 
 
    width: 140px; 
 
    padding-left: .5rem; 
 
} 
 
/* Following rule simply to hide the broken images, 
 
    irrelevant to the answer/requirement */ 
 

 
#dataanalysis td a img { 
 
    display: none; 
 
} 
 
#dataanalysis td:nth-child(2n) { 
 
    border-right: none; 
 
} 
 
#dataanalysis td:last-child { 
 
    text-align: right; 
 
    width: 25px; 
 
    border-left: none; 
 
} 
 
#dataanalysis td figure { 
 
    background: linear-gradient(to right, #f24f37 0%, #cd2134 100%); 
 
    height: .8rem; 
 
    margin: 0 0 0 .5rem; 
 
    border-radius: 0.3rem; 
 
    border: 1px solid black; 
 
} 
 
#dataanalysis td img { 
 
    width: .8rem; 
 
    padding-left: .8rem; 
 
}

<table id="dataanalysis"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Acousticness 
 
     <a href="#" data-tooltip="A confidence measure from 0.0 to 1.0 of whether the track is acoustic. 1.0 represents high confidence the track is acoustic."> 
 
      <img src="/assets/img/info.svg" alt="tip"> 
 
     </a> 
 
     </td> 
 
     <td> 
 
     <figure style="width:87%"></figure> 
 
     </td> 
 
     <td>87%</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Danceability 
 
     <a href="#" data-tooltip="Danceability describes how suitable a track is for dancing based on a combination of musical elements including tempo, rhythm stability, beat strength, and overall regularity. A value of 0.0 is least danceable and 1.0 is most danceable."> 
 
      <img src="/assets/img/info.svg" alt="tip"> 
 
     </a> 
 
     </td> 
 
     <td> 
 
     <figure style="width:15%"></figure> 
 
     </td> 
 
     <td>15%</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Energy 
 
     <a href="#" data-tooltip="Energy is a measure from 0.0 to 1.0 and represents a perceptual measure of intensity and activity. Typically, energetic tracks feel fast, loud, and noisy. For example, death metal has high energy, while a Bach prelude scores low on the scale. Perceptual features contributing to this attribute include dynamic range, perceived loudness, timbre, onset rate, and general entropy."> 
 
      <img src="/assets/img/info.svg" alt="tip"> 
 
     </a> 
 
     </td> 
 
     <td> 
 
     <figure style="width:49%"></figure> 
 
     </td> 
 
     <td>49%</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Instrumentalness 
 
     <a href="#" data-tooltip="Predicts whether a track contains no vocals. " Ooh " and "aah " sounds are treated as instrumental in this context. Rap or spoken word tracks are clearly "vocal 
 
     ". The closer the instrumentalness value is to 1.0, the greater likelihood the track contains no vocal content. Values above 0.5 are intended to represent instrumental tracks, but confidence is higher as the value approaches 1.0."> 
 
      <img src="/assets/img/info.svg" alt="tip"> 
 
     </a> 
 
     </td> 
 
     <td> 
 
     <figure style="width:32%"></figure> 
 
     </td> 
 
     <td>32%</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Liveness 
 
     <a href="#" data-tooltip="Detects the presence of an audience in the recording. Higher liveness values represent an increased probability that the track was performed live. A value above 0.8 provides strong likelihood that the track is live."> 
 
      <img src="/assets/img/info.svg" alt="tip"> 
 
     </a> 
 
     </td> 
 
     <td> 
 
     <figure style="width:65%"></figure> 
 
     </td> 
 
     <td>65%</td> 
 
    </tr> 
 
    <tr> 
 
     <td>speechiness 
 
     <a href="#" data-tooltip="Speechiness detects the presence of spoken words in a track. The more exclusively speech-like the recording (e.g. talk show, audio book, poetry), the closer to 1.0 the attribute value. Values above 0.66 describe tracks that are probably made entirely of spoken words. Values between 0.33 and 0.66 describe tracks that may contain both music and speech, either in sections or layered, including such cases as rap music. Values below 0.33 most likely represent music and other non-speech-like tracks."> 
 
      <img src="/assets/img/info.svg" alt="tip"> 
 
     </a> 
 
     </td> 
 
     <td> 
 
     <figure style="width:11%"></figure> 
 
     </td> 
 
     <td>11%</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Valence/Happiness 
 
     <a href="#" data-tooltip="A measure from 0.0 to 1.0 describing the musical positiveness conveyed by a track. Tracks with high valence sound more positive (e.g. happy, cheerful, euphoric), while tracks with low valence sound more negative (e.g. sad, depressed, angry)."> 
 
      <img src="/assets/img/info.svg" alt="tip"> 
 
     </a> 
 
     </td> 
 
     <td> 
 
     <figure style="width:91%"></figure> 
 
     </td> 
 
     <td>91%</td> 
 
    </tbody> 
 
</table>

JS Fiddle demo。

Answer 2

キーフレームの代わりにtransitionを使用してください。次のようなものがあります。

#dataanalysis td figure { 
    transition: width 2s normal; 
}