css-animations | 易学教程

Slide in from left CSS animation

阅读更多关于 Slide in from left CSS animation

问题 I would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet. HTML <body> <div> <img src="logo.png" alt="logo" style="width:170px;height:120px;"> </div> </body> CSS div { width:640px; height:175px; background:blue; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;

Using CSS animation while javascript computes

阅读更多关于 Using CSS animation while javascript computes

问题 I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit. I was wondering if there is any way to let something animate while the javascript is

Change Animation speed on hover

阅读更多关于 Change Animation speed on hover

问题 I'm building a planetsystem, where it is possible to hover over the orbit and the animation speed changes . I tried it with the onMouseOver and .hover jquery, but I couldn't figure out why it wasnt working. #universum-planet1 { position: absolute; height: 250px; width: 250px; top: 40%; left: 50%; margin-left: -125px; margin-top: -65px; z-index: 1; border: 1px solid #989898; -webkit-border-radius: 225px; -moz-border-radius: 225px; border-radius: 225px; -webkit-animation: spin 15s linear

Border radius and overflow aren't respected when animation is added on a different element

阅读更多关于 Border radius and overflow aren't respected when animation is added on a different element

问题 I got a weird behavior when working with transform in CSS3. Here is my code: *, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .btn_exchange a { position: relative; text-decoration: none; display: block; width: 150px; float: left; color: #ffffff; font-size: 14px; background: #0ea2d3; box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75); text-align: center; font-weight: bold; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform:

adding animation to flex-wrap

阅读更多关于 adding animation to flex-wrap

问题 when it comes to wrap point how can we add animation? maybe this can help: we have a header and inside of that header we have container with flex attr and the direction is column when we resize our browser from bottom to top or when we changing height of browser those items suddenly reshape , I just want to add animation to this event.thx <header> <div class="container"> <div class="item1 item"></div> <div class="item2 item"></div> <div class="item3 item"></div></div></header> header { width:

Can I apply animations to margins?

阅读更多关于 Can I apply animations to margins?

问题 I'm trying to animate in CSS3 margins, which this site seems to say you can, but I can't get working. I actually have 3 animations. 1 for a simple initial fadeIn on initial load, then the 2 others for the margin animation on click. I've also just tried margin instead of the top and bottom but still no sign of it working. Click on a section to see animation toggle. $(".section").click(function() { $(this).toggleClass("open"); }); body{ background: #f1f1f1; } .section{ display: block;

Detect specific CSS3 Keyframe with JavaScript

阅读更多关于 Detect specific CSS3 Keyframe with JavaScript

How to detect that the animation reached a specific keyframe? (For example 50% or 75%). This is what I tried: element.addEventListener("animationend", AnimationListener, false); but it supports animationstart, animationiteration and animationend only. http://jsfiddle.net/W3y7h/294/ Using the example Fiddle provided, what you're essentially looking to know is when the value of #sun element's bottom property is equal to 100px . You can do this by using getComputedStyle() to check that value, clearing the interval when it is equal to 100px and then executing whatever code you wish, like so: var

CSS calc with inherit

阅读更多关于 CSS calc with inherit

问题 I would like to use inherit with calc() like this: #foo { animation-duration: 10s; } #foo > .bar { animation-duration: calc(inherit + 2s); /* =12s */ } But it don't seem to works. Is it browsers bug or specs? 回答1: The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it's a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade. Furthermore, the calc()

CSS Animation, working adding class, but not removing the class

阅读更多关于 CSS Animation, working adding class, but not removing the class

I've got this keyframe @keyframes jump { 25% { transform: translate3d(0, 0px, 0); } 75% { transform: translate3d(0, 10em, 0); } 100% { transform: translate3d(0, 17.5em, 0); } } Then I have this class .close.form_open { animation: jump .5s forwards linear; -webkit-animation: jump .5s forwards linear; } I'm adding the class form_open with jQuery and when the class is added the animation is working properly, but when I remove the class (with jQuery), it doesn't show the animation. The element goes to the right position, but without any animation. What am I missing? My class close is empty .close

How to smooth out a CSS gradient transition?

阅读更多关于 How to smooth out a CSS gradient transition?

I am creating an interactive touchscreen display using a program called Intuiface and have created some background tiles/squares that I want to make look 'alive' by transitioning slowly between colours. I have used a linear-gradient transition in CSS to do it but the problem is that the transition looks choppy. The program is running 12 visible tiles (it is a very large touchscreen). I have tried using fewer colours and running on more powerful GPUs (I think it is CPU run anyway) but this hasn't helped. body { width: 100wh; height: 90vh; background: linear-gradient(-45deg, #EE7752, #E73C7E,