css-animations

Scroll based animation working outside of defined area

由 强颜欢笑 提交于 2019-12-24 20:12:50
问题 So I'm super new with JS. I'm trying to get a scroll animation to work only in a designated area but instead my "position: fixed" tag is causing it to appear at the top of my site and scroll all the way through it instead of the animation starting and and working only in it's defined frame. Any ideas how I could fix this? Here's what it looks like (it's the Iron Man helmet, pardon the unfinished site): http://frontlinecreative.co/test-page/ Here's the code I'm working with: $(document).ready

CSS3 Slider with more than 6 images

由 筅森魡賤 提交于 2019-12-24 19:06:30
问题 I am using a nice CSS3 slider for a slideshow in our canteen. The slider is awesome but it has a bug and the developer seems to be no longer active. If you add more than 6 items to the slideshow it overlaps and I can't find the issue. Anybody has any ideas? Here's the fiddle <body id="page"> <ul class="cb-slideshow"> <ul> <!-- Background Images muessen via CSS gesetzt werden! --> <li><span>Image 01</span><div class="slide">{{SP7}}</div></li> <li><span>Image 02</span><div class="slide">{{SP2}}

HTML5/CSS3 layout to show tasks running status [closed]

由 二次信任 提交于 2019-12-24 17:57:02
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 3 years ago . I need to create a design to showcase the task status i.e. running/pending/failed/passed as shown in the below screenshot. How can i create it using HTML5/CSS3? or,any pointers to achieve the same will be of great help. Thanks in advance, Manish Kumar 回答1: You could do it like the

HTML5/CSS3 layout to show tasks running status [closed]

由 ♀尐吖头ヾ 提交于 2019-12-24 17:56:08
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 3 years ago . I need to create a design to showcase the task status i.e. running/pending/failed/passed as shown in the below screenshot. How can i create it using HTML5/CSS3? or,any pointers to achieve the same will be of great help. Thanks in advance, Manish Kumar 回答1: You could do it like the

How to delay a hyperlink until a CSS animation ends?

由 元气小坏坏 提交于 2019-12-24 17:40:36
问题 I'm trying to get the anchor tag to redirect as soon as the CSS animation ends. I tried capturing the href in jQuery and using 'setTimeout' to cause a delay before going to the anchor location (this is what was recommended in previous threads), but it hasn't been working. $(document).ready(function() { $('.section').click(function() { var goTo = this.getAttribute("href"); //HOLDS HREF var $elementA = $('.section').bind('webkitAnimationEnd', function() //ANIMATION BEGIN { $(this).removeClass(

Cycling CSS3 animation with a pause period?

由 只愿长相守 提交于 2019-12-24 17:15:27
问题 I want to run an animation after a pause in a cycle. For EXAMPLE, @-webkit-keyframes test { 0% { opacity:0; } 50% { opacity:1; } 100%{ opacity:0;} } .test { -webkit-animation:test 5s linear 10s infinite forwards; } I want to pause/delay the animation for 10s , then doing the animation for 5s and repeating this cycles. The above example, only works for the first cycle. How can I induce delay/pause in each cycle for infinite cycling? In other words, I need a 15s cycle but with 5s of animation

How can I slow down my CSS Animated Text transitions?

由 风流意气都作罢 提交于 2019-12-24 16:58:40
问题 I created a sentence with a group of words in between that are animated to fade transition one after the other. But now the words are transitioning rapidly, and I can't seem to adjust the speed. So far I've tried to change the property: animation-delay: -8s; on all the span:childs, but this doesnt change the speed of the transitions. I've also tried to alter the property animation: elements 10s infinite linear; with no luck. I'm failrly new to CSS3 animations, and I need help in understanding

How can I slow down my CSS Animated Text transitions?

由 做~自己de王妃 提交于 2019-12-24 16:57:21
问题 I created a sentence with a group of words in between that are animated to fade transition one after the other. But now the words are transitioning rapidly, and I can't seem to adjust the speed. So far I've tried to change the property: animation-delay: -8s; on all the span:childs, but this doesnt change the speed of the transitions. I've also tried to alter the property animation: elements 10s infinite linear; with no luck. I'm failrly new to CSS3 animations, and I need help in understanding

CSS keyframe animations and delay?

由 邮差的信 提交于 2019-12-24 11:35:38
问题 I have a keyframe animation, that infinitly loops. -webkit-animation: fade 3s ease-in-out infinite; @-webkit-keyframes fade { 0% { opacity: 0; -webkit-transform: rotate(0deg);} 20% { opacity: 1; -webkit-transform: rotate(360deg);} 100% { opacity: 0; -webkit-transform: rotate(360deg);} } How can I delay each ilteration of the loop. im aware I can delay teh entire animation, but this only occurs once. I wish to do it everytime. 回答1: Unfortunately there is no current option to easily put a delay

matrix not equal to translate and rotate combination in css transform animation?

由 房东的猫 提交于 2019-12-24 10:55:24
问题 @keyframes gray { 0% { transform: matrix(1, 0, 0, 1, 0, 0) } 100% { transform: matrix(-1, 0, 0, -1, 20, 20) } } @keyframes lightblue { 0% { transform: translate(10px, 10px) rotate(0deg) translate(-10px, -10px); } 100% { transform: translate(10px, 10px) rotate(180deg) translate(-10px, -10px); } } .gray { float: left; margin-left: 50px; width: 20px; height: 20px; background: gray; transform-origin: 0px 0px; animation: gray linear 1s infinite; } .lightblue { float: left; margin-left: 50px; width
订阅 css-animations