keyframe

CSS-moving text from left to right

由 只愿长相守 提交于 2019-12-01 16:38:37
问题 I want to create an animated HTML "marquee" that scrolls back and forth on a website: <div class="marquee">This is a marquee!</div> and the CSS: .marquee { position: absolute; white-space: nowrap; -webkit-animation: rightThenLeft 4s linear; } @-webkit-keyframes rightThenLeft { 0% {left: 0%;} 50% {left: 100%;} 100% {left: 0%;} } The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear,

Smoothly stop CSS keyframe animation

由 孤街醉人 提交于 2019-11-28 11:59:47
I have the following code: http://jsfiddle.net/odj8v0x4/ . function stopGlobe() { $('.mapfront').removeClass('mapfront-anim'); $('.mapback').removeClass('mapback-anim'); } function startGlobe() { $('.mapfront').addClass('mapfront-anim'); $('.mapback').addClass('mapback-anim'); } @keyframes mapfront_spin { 0% { background-position: 1400px 0%; } 100% { background-position: 0 0%; } } @keyframes mapback_spin { 0% { background-position: 0 0%; } 100% { background-position: 1400px 0%; } } @-webkit-keyframes mapfront_spin { 0% { background-position: 1400px 0%; } 100% { background-position: 0 0%; } } @

CSS lint parsing error - expected LBRACE error

由 你。 提交于 2019-11-28 10:04:33
问题 Need some help. When looking at my CSS in CSS lint, they constantly report a parsing error, namely 'expected LBRACE error' Here is a screenshot of the issue: screenshot They show issue on my closing bracket. I checked my code several times, and I just can't find, what could be the issue. What I realized if I change the key-frame prefix order, then the error shows on different lines (so not always on the closing bracket) Here is my code, please take a look, and let me know if somebody sees an

Cross-Fade between images with CSS in loop

由 耗尽温柔 提交于 2019-11-28 08:23:43
I want to fade between images in a loop (like result here- jsfiddle.net/5M2PD ) but purely through CSS , no JavaScript . I tried using key-frames but I wasn't successful. Please Help. @keyframes cf3FadeInOut { 0% { opacity:1; } 45% { opacity:1; } 55% { opacity:0; } 100% { opacity:0; } } #cf3 img.top { animation-name: cf3FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 10s; animation-direction: alternate; } I have taken your fiddle as a base, and made it work without script. updated demo I needed to set an id to the HTML <div class=

How to prevent css keyframe animation to run on page load?

由 落花浮王杯 提交于 2019-11-28 05:16:33
I have a div in which I animate the content: #container { position: relative; width: 100px; height: 100px; border-style: inset; } #content { visibility: hidden; -webkit-animation: animDown 1s ease; position: absolute; top: 100px; width: 100%; height: 100%; background-color: lightgreen; } #container:hover #content { -webkit-animation: animUp 1s ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes animUp { 0% { -webkit-transform: translateY(0); visibility: hidden; opacity: 0; } 100% { -webkit-transform: translateY(-100%); visibility: visible; opacity:

how to change keyframe interval in ffmpeg

由 拥有回忆 提交于 2019-11-27 12:57:22
问题 I wanted to set the keyframe interval of an input video to 5 seconds. Only then can I achieve a constant 5 second HLS segmentation using FFmpeg. How to set the keyframe interval to 5 seconds using FFmpeg? (FFmpeg prompt line code appreciated) 回答1: You'll need to reencode. Set x264's keyint parameter to 5*fps and disable scenecut. If your fps is 24 for example : ffmpeg -i <input> -vcodec libx264 -x264-params keyint=120:scenecut=0 -acodec copy out.mp4 This is obviously not optimal for quality

Passing parameters to css animation

由 和自甴很熟 提交于 2019-11-27 09:44:47
p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } For the animation CSS code above, I'm wondering whether there's any way to pass the values of margin-left and width as parameter from Javascript. Use CSS variables and you can easily do this: document.querySelector('.p2').style.setProperty('--m','100%'); document.querySelector('.p2').style.setProperty('--w','300%'); .p1,.p2 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: var(--m, 0%); width: var

How to have css3 animation to loop forever

由 拟墨画扇 提交于 2019-11-27 07:45:05
I want to have the whole set of animation to play forever. When the last photo fades off, I want the first one to appear again an so on. What I did (and I dont like) is set the page to reload at the end of the last photo fade out. Is there any other way to do this using css??? <html> <head> <style> .content{ height: 400px !important; /*margin: auto !important;*/ overflow: hidden !important; width: 780px !important; } .imgholder{ height: 400px; margin: auto; width: 780px; } .photo1{ opacity: 0; animation: fadeinphoto 7s 1; -moz-animation: fadeinphoto 7s 1; -webkit-animation: fadeinphoto 7s 1;

Smoothly stop CSS keyframe animation

由 自作多情 提交于 2019-11-27 06:39:41
问题 I have the following code: http://jsfiddle.net/odj8v0x4/. function stopGlobe() { $('.mapfront').removeClass('mapfront-anim'); $('.mapback').removeClass('mapback-anim'); } function startGlobe() { $('.mapfront').addClass('mapfront-anim'); $('.mapback').addClass('mapback-anim'); } @keyframes mapfront_spin { 0% { background-position: 1400px 0%; } 100% { background-position: 0 0%; } } @keyframes mapback_spin { 0% { background-position: 0 0%; } 100% { background-position: 1400px 0%; } } @-webkit

How to prevent css keyframe animation to run on page load?

由 喜你入骨 提交于 2019-11-27 00:41:51
问题 I have a div in which I animate the content: #container { position: relative; width: 100px; height: 100px; border-style: inset; } #content { visibility: hidden; -webkit-animation: animDown 1s ease; position: absolute; top: 100px; width: 100%; height: 100%; background-color: lightgreen; } #container:hover #content { -webkit-animation: animUp 1s ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes animUp { 0% { -webkit-transform: translateY(0);
订阅 keyframe