CSS 키 프레임 : 페이지로드시 인라인 값으로 애니메이션/전환

Question

CSS 및 HTML 기반 막대 값으로 백분율 값을 나타내는 프로젝트를 작업 중입니다. 코드는 다음과 같습니다

HTML : CSS

<div class="chart"> 
    <div class="bar" style="width:43%"></div> 
</div> 

: 내가하고 싶은 무엇

.chart { 
    background-color: #DADADA; 
    height: 2px; 
    position: relative; 
} 

.chart .bar { 
    background-color: #3D98C6; 
    height: 100%; 
} 

페이지로드에 0 %에서 바 너비를 시작하는 것입니다 인라인 값에 애니메이션을 적용합니다. 값을 인라인으로 지정하여 백엔드 개발자가 Ruby on Rails에 뷰의 백분율을 출력하도록 할 수 있습니다. 나는 전환이 할 수 있다는 것을 알고, 내가 현재하고있는 중이 야 그 같은 :

CSS :

.chart .bar { 
    -moz-transition: width 1.25s linear; 
    -webkit-transition: width 1.25s linear; 
    -ms-transition: width 1.25s linear; 
    -o-transition: width 1.25s linear; 
    transition: width 1.25s linear; 
} 

body.jquery.csstransitions:not(.loaded) .chart-container .chart .bar { 
    width: 0% !important; 
} 

자바 스크립트 :

$(function() { 
    $('body').addClass('jquery'); 

    // Way down in the code 

    $('body').addClass('loaded'); 
}); 

이 사용자가 가지고있는 동안 자바 스크립트를 지원하는 것을 말한다 , 브라우저가 CSS 전환을 지원하고 "로드 됨"클래스가 본문에 추가되지 않은 경우 모든 막대의 폭은 0 %입니다. jQuery로 .loaded를 추가하면 막대가 모두 인라인 값으로 전환됩니다.

이 방법으로 문제가되는 것은 사용자가 JavaScript를 사용할 수 있고 "jquery"및 "csstransitions"클래스가 추가되지만 그것이 도착하기 전에 어떤 이유로 중단됩니다. 클래스를 추가하는 코드는 .loaded입니다. 그러면 막대가 모두 너비 0 %로 표시됩니다. 이 프로젝트는 많은 노력을 기울이고 있으며 자바 스크립트가 깨져 사용자가 깨진 차트를 볼 수있는 기회가 될 수 있습니다. CSS 키 프레임 애니메이션을 사용하여 0 % 너비에서 인라인 너비까지 애니메이션을 만들 수 있다면 자바 스크립트를 방정식에서 꺼내어 코드가 막대를 움직이게하거나 애니메이션없이로드 할 수 있음을 알 수 있습니다.

자바 스크립트를 사용하지 않고도 페이지로드시 폭을 애니메이션/전환하는 방법이 있습니까?

Answer 1

내 질문이 결국 실제로 대답하기가 쉽지 않은 것처럼 보입니다. 이전에는 CSS 키 프레임 애니메이션을 사용 해 본적이 없었습니다. 기본적으로 시간에 따라 조건부로 스타일을 적용한 다음 애니메이션을 적용한다는 사실을 인식하지 못했습니다. 이것이 의미하는 바는 특정 키 프레임에 스타일을 적용하지 않으면 스타일을 적용하는 다음 줄이 빈 스타일 대신 애니메이션으로 적용된다는 것입니다. 이것은 내가이 작업을 수행 할 수 있다는 것을 의미한다 :

HTML :

<div class="chart"> 
    <div class="bar" style="width:43%;"></div> 
</div> 

CSS :

@-moz-keyframes animate-bar { 
    0% { width: 0%; } 
} 

@-webkit-keyframes animate-bar { 
    0% { width: 0%; } 
} 

@-ms-keyframes animate-bar { 
    0% { width: 0%; } 
} 

@-o-keyframes animate-bar { 
    0% { width: 0%; } 
} 

@-keyframes animate-bar { 
    0% { width: 0%; } 
} 

.chart { 
    background-color: #DADADA; 
    height: 2px; 
    position: relative; 
} 

.chart .bar { 
    background-color: #3D98C6; 
    height: 100%; 
    -moz-animation: animate-bar 1.25s 1 linear; 
    -webkit-animation: animate-bar 1.25s 1 linear; 
    -ms-animation: animate-bar 1.25s 1 linear; 
    -o-animation: animate-bar 1.25s 1 linear; 
    animation: animate-bar 1.25s 1 linear; 
} 

그리고 단지 인라인 스타일로 애니메이션됩니다 0 %의 시작 애니메이션, 때문에 마무리 스타일이 없다는 것은 마무리 스타일이 그 스타일을 덮어 쓰는 것과 동일하다는 것을 의미합니다.

편집 :

나는 미래 방문자에게 이것을 보여주기 위해 JS Fiddle을 만들었습니다.