«css-animations» 태그된 질문

opacity: 0;CSS에 설정된 일부 요소에서 애니메이션을 실행하고 있습니다. 애니메이션 클래스는 onClick에 적용되며 키 프레임을 사용하여 불투명도 0를 1(다른 것들 중에서) 로 변경합니다 . 불행히도 애니메이션이 끝나면 요소 opacity: 0는 Firefox 및 Chrome 으로 돌아갑니다 . 저의 자연스러운 생각은 애니메이션 요소가 최종 상태를 유지하면서 원래 속성을 무시한다는 것입니다. 이것이 사실이 아닙니까? …

301 css  css-animations 

현재이 코드가 있습니다. @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } 깜박이지만 "한 방향"으로 만 깜박입니다. 내 말은, 단지 페이드 아웃되고 다시로 나타나고 opacity: 1.0다시 페이드 아웃되고 다시 나타납니다. 페이드 …

288 html  css  css-animations  opacity 

Javascript를 사용하지 않고 페이지로드시 CSS3 전환 애니메이션을 사용할 수 있습니까? 이것은 내가 원하는 종류이지만 페이지로드시 : http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 내가 지금까지 찾은 것 CSS3 transition-delay , 요소에 대한 영향을 지연시키는 방법. 호버에서만 작동합니다. CSS3 Keyframe 은로드시 작동하지만 매우 느립니다. 그 때문에 유용하지 않습니다. CSS3 전환 속도는 빠르지 만 페이지로드시 애니메이션 효과는 없습니다.

196 css  webkit  css-transitions  css-animations 

클릭시 4 부분의 CSS3 애니메이션이 재생되지만 애니메이션의 마지막 부분은 화면에서 벗어납니다. 그러나 일단 재생되면 항상 원래 상태로 돌아갑니다. 누구든지 마지막 CSS 프레임 (100 %) 에서 중지하는 방법 또는 재생 된 전체 div를 제거하는 방법을 알고 있습니다 . @keyframes colorchange { 0% { transform: scale(1.0) rotate(0deg); } 50% { transform: rotate(340deg) …

180 css  css-animations 

꽤 많은 데모를 검토했지만 CSS3 스핀이 작동하지 않는 이유를 모르겠습니다. 최신 안정 버전의 Chrome을 사용하고 있습니다. 바이올린 : http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 40000ms; -ms-animation-iteration-count: …

161 css  css-animations 

CSS3 전환과 애니메이션을 모두 수행하는 방법을 알고 있습니다. 명확하지 않은 것은 내가 구글에서봤을 때 어느 것을 사용 해야하는지입니다. 예를 들어, 볼 바운스를 만들고 싶다면 애니메이션이 나아갈 길이라는 것이 분명합니다. 키 프레임을 제공 할 수 있고 브라우저는 중간 프레임을 수행 할 것이고 멋진 애니메이션을 만들 것입니다. 그러나, 상기 효과가 어느 방식 …

155 css  css-transitions  css-animations 

자바 스크립트 또는 텍스트 장식을 사용하지 않고 텍스트를 구식 스타일로 깜박이게하고 싶습니다. 전환 없음, * blink *, * blink *, * blink * 만! 편집 : 이것은 연속 전환없이 깜박임 을 요청하기 때문에이 질문 과 다릅니다 . 반면 다른 질문의 OP는 깜박임 을 연속 전환으로 대체 하는 방법을 묻습니다.

149 html  css  css-animations  blink 

을 수행 한 후 흐릿한 텍스트를 유발하는 최근 Google 크롬 업데이트가있는 것 같습니다 transform: scale(). 특히 나는 이것을하고있다 : @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Chrome에서 http://rourkery.com 을 …

126 google-chrome  css  webkit  transform  css-animations 

두 개의 CSS 애니메이션 을 다른 속도로 재생하려면 어떻게해야 합니까? 이미지는 동시에 회전하고 커야합니다. 회전은 2 초마다 순환합니다. 성장은 4 초마다 순환합니다. 예제 코드 : .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; } …

119 css  css-animations 

이 간단한 일은 쉽게 해낼 수 있어야하지만, 그것이 얼마나 복잡한 지에 대해 머리를 뽑아 내고 있습니다. 제가하고 싶은 것은 React 컴포넌트의 마운트와 언 마운트를 애니메이션화하는 것뿐입니다. 지금까지 시도한 내용과 각 솔루션이 작동하지 않는 이유는 다음과 같습니다. ReactCSSTransitionGroup -CSS 클래스를 전혀 사용하지 않고 모든 JS 스타일이므로 작동하지 않습니다. ReactTransitionGroup-이 하위 수준 …

103 animation  reactjs  css-animations  greensock  react-motion 

줄임표 애니메이션을 만들려고하는데 CSS 애니메이션으로 가능한지 궁금합니다 ... 그래서 아마 Loading... Loading.. Loading. Loading... Loading.. 그리고 기본적으로 그렇게 계속하십시오. 어떤 아이디어? 편집 : 다음과 같이 : http://playground.magicrising.de/demo/ellipsis.html

94 css  css-animations 

완료 후 CSS 애니메이션 속성을 유지하려고합니다. 가능합니까? 이것이 제가 이루고자하는 것입니다 ... 요소는 사용자가 페이지에 도착했을 때 숨겨져 야하며, 3 초 (또는 기타) 후에 페이드 인되어야하며 애니메이션이 완료되면 그대로 유지되어야합니다. 여기 바이올린 시도가 있습니다 ... http://jsfiddle.net/GZx6F/ 다음은 보존을위한 코드입니다 ... <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } …

92 css  css-animations 

주변을 둘러 보았지만 원하는 것을 찾을 수 없습니다. 현재 내 페이지에 : hover에 의해 트리거되는 CSS 애니메이션이 있습니다. 미디어 쿼리를 사용하여 페이지의 너비가 700px 이상으로 조정될 때 '클릭'또는 '터치'로 변경하고 싶습니다. 현재 내가 가지고있는 것은 다음과 같다. http://jsfiddle.net/danieljoseph/3p6Kz/ 보시다시피 : hover는 모바일 장치에서 작동하지 않지만 마우스 오버가 아닌 클릭만으로 동일한 …

84 css  css-animations 

저는 최근에 CSS 애니메이션을 "올바르게"사용하는 방법을 발견했습니다 (이전에는 JavaScript에서와 같이 복잡한 시퀀스를 만들 수 없다고 무시했습니다). 이제 나는 그들에 대해 배우고 있습니다. 이 효과를 위해 진행률 표시 줄과 같은 요소에 그라데이션 "플레어"스윕을 적용하려고합니다. 기본 Windows Vista / 7 진행률 표시 줄의 효과와 유사합니다. @keyframes barshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) …

81 css  css-animations 

CSS를 사용하여 롤러 코스터 스타일의 애니메이션을 만들려고합니다. 루프 단계에있을 때 "코스터"를 구부리는 방법을 알고 싶습니다. 모든 CSS 솔루션을 찾고 있지만 약간의 JavaScript가 필요하다면 괜찮습니다. 지금까지 내 코드 : #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: …

15 html  css  css-animations  css-transforms