CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
2
votes
4answers
44 views
using the .each() function doesn't allow me to use the .on() function
I would like to get some guidance on the use of .each() and .on().
I am trying to remove the class playing from the element that contains them after they have ended their transition. However, on ...
1
vote
2answers
55 views
Slide from right to left animation using css
currently I write code to display a hidden div using jQuery. But I want to make an animation effect for this div when it appearing in the window .
When I click on the window2 then window2 is ...
0
votes
1answer
31 views
how to animate svg path in jquery
this code works on chrome, but not in safari, firefox. Is there any possible way to do this with jQuery?
svg .cls-1 {
d: path("M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,...
0
votes
1answer
38 views
How to transition fill colors when your svg is in “content: url(..)”
What I am trying to do is use CSS transitions to change the fill color of the svg within "content: url(..)", instead of replacing the image completely.
HTML:
<h3>Hello World</h3>
CSS
...
0
votes
1answer
19 views
Hover two elements without shifting effect
How can I hover the div with text 'Myriam lefebvre', and the span 'Développeure-front-end' at the same time, without the shifting effect?
.logo__name {
position: absolute;
top: 0px;
left:...
1
vote
1answer
32 views
How can I avoid transition delays when switching hover between siblings?
How can I avoid transition delays when switching hover between siblings without javascript?
My goal is to produce a mega menu with the following behavior:
If the user hovers over a given mega menu ...
-1
votes
0answers
26 views
Issue with CSS animation “jumps” back to start
everyone!
I reused a scissors animation found on CodePen and I've edited the code to do this: https://jsfiddle.net/logitek/qqbspcjw/
.scissors-container .half {
Width: 8em;
Height: 1....
85
votes
8answers
168k views
css3 transition animation on load?
Is it possible to use CSS3 transition animation on page load without using Javascript?
This is kind of what I want, but on page load:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
...
0
votes
2answers
41 views
CSS transition not working when changing css from javascript
I'm basically trying to make popups appear from the element they were clicked, similar to Angular Material Dialogs here. I know how to do transitions by adding and removing classes but what about when ...
0
votes
1answer
28 views
How to set delay between each repeated iterations in Wow.js animation?
I have created shaking animation using wow.js. I want to pause that shake animation for sometime like 6s and restart the shake animation.How to achieve it? .I have provided snippet of shaking image
...
0
votes
3answers
33 views
creating a html banner ad with inline css animation
Is it possible to create a html banner ad with inline css animations? I just need a div with my code that they will insert in their page, so the animation and styles need to be inline. i just need to ...
0
votes
1answer
22 views
grid system - smooth transition when column/div gets pushed to next row
I'm currently using semantic-ui's grid system but this question would also apply to any other grid system (bootstrap...)
I habe four columns in a row in which cards are placed (lots of cards with ...
1
vote
0answers
41 views
CSS Transitions with repeating backgrounds
So this animation exists:
https://codepen.io/NickyCDK/pen/AIonk
body { background-color:#333; }
#snow{
background: none;
font-family: Androgyne;
background-image: url('http://www....
0
votes
1answer
35 views
Does will-change CSS property need to be applied also while the element is changing?
I'm trying to make use of the CSS will-change property instead of the translateZ(0) hack.
I understand that the property needs to be applied before the element changes. But my doubt is if it needs to ...
0
votes
2answers
27 views
Unwanted Space in Border Transition
I made a border transition for a div in CSS that basically has the border become visible in a clock-work manner.
Here it is
Hover over the gray rectangle to see it.
The code below just here ...
6
votes
1answer
431 views
CSS Animation not working properly in wow js
I have integrated the wow.js for my project and i have encountered a problem with animation.
The animation class which i used to animate the div is working only if i paste the css class from animate....
5
votes
4answers
18k views
Slide down animation from display:none to display:block?
Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?
HTML:
<div id="box"&...
0
votes
2answers
10k views
background-image opacity transition on hover with CSS3
I'm trying to use background image opacity (from 0 to 100%) transition when user put cursor over a link.
I have smth like this:
<div class="menu">
<ul class="sf-menu">
<li class="...
5
votes
1answer
358 views
Why does calling focus() break my CSS transition?
This html file shows a 3 panel layout. A css transition on the "left" property gives me a nice sliding effect when I change panels. It all works but, when I change panels, I want to place the focus on ...
0
votes
2answers
34 views
How to apply tilt image animation repeatedly?
I have created a snippet. I want to tilt that image to both side repeatedly to both side.
.demo{
text-align:center;
}
.demo img{
width:50%;
}
<div class="demo">
<img src="...
6
votes
1answer
31 views
Footer interrupting opacity transition effect CSS
I am having two issues with my footer element:
1) I managed to finally make it stick to the bottom of every page, but,
2) once I did that, my opacity transition effect inside div class=...
2
votes
3answers
1k views
CSS3 IE 10 Page Fade In Transition/Animation
Looking for a cool, smooth lightweight CSS3 page fade in transition effect.
Only need support for IE 10, as I want to use it in a Windows Metro App with the WebView control (which is a lightweight ...
0
votes
0answers
24 views
css translate 3d background effect while on page scroll
I want to achieve this background zoom effect found on this site http://www.apple.com/macos/sierra/ . It looks like it's changing some 3d css properties while on page scroll.
Has anyone one done ...
0
votes
0answers
15 views
Strange visual glitch with button and dynamically changed height
I have a button with a ::before pseudo element as a background, to achieve an animated hover effect, and above this button there's a carousel with adaptive height.
My problem is that when the user ...
0
votes
2answers
37 views
How to make zooming only to background image?
I have created a example with keyframe to zoom in and out background image. It's work but also zooming inner text.
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px ...
-1
votes
3answers
23 views
How to make background scale from center outwards with CSS transition
I am trying to replicate the effect when you hover over a date with Material UI's date picker here (click on any text input to trigger the picker, then hover over a day) where the background expands ...
0
votes
2answers
11 views
Timed 3 Bars CSS Menu
I am trying to make a burger menu where the three bars fill with an orange color from left to right on hover!
Currently though I have it that when you hover. The bars fully fill with orange and when ...
-1
votes
2answers
37 views
How move divs up/down using CSS animation without a “blink” between directions?
I'm trying to move these divs up and down based on clicks:
Initial click moves them up
Next Click moves them down (then repeat on next clicks)
Moving them up works well, but when i click to move ...
4
votes
2answers
37 views
CSS3 transition of :after pseudoelements wait to main item transition end
I have simple problem: If I attach css transition to pseudoelement (:after, :before) and main item, animation of pseudoelement waiting to end of animation of main item. I want do both animation ...
0
votes
0answers
39 views
css transition height 0 to 100(- 80px) not smooth in Safari and on mobile view
Here's live demo. Please check links "Rio 2016" and "Pokemon GO". This links collapsed 2 sections at top.
I have this jquery script witch just toggle active class.
$('.header-themes a').click(...
3
votes
3answers
35 views
Can CSS animate or transition be used on the flex-direction property?
If an ordered list uses flex-direction: column on small screens and flex-direction: row on larger screens, can CSS3 animations or transitions animate the flex-direction property between media queries?
...
0
votes
1answer
32 views
css transition max-height back to 0 not working
I have a simple div which has height and max-height set to 10px. When I hover over it, it should expand to the full height of div and when I leave it should shrink back to 10px.
But the when I ...
0
votes
0answers
23 views
Transition CSS not working on blackberry 10
I have an icon that, once tapped, opens a sidebar. I'm using this CSS3 transition:
transition: transform .2s ease-in-out;
The sidebar is not working on BlackBerry devices but when I visit http://...
0
votes
1answer
31 views
How is possible to get 2d transformation css vertical way
I have this with the following CSS 2d Transforms code that built a h2 in horizontal way from the Left side of the Content to the Right.
I'd need the same effect but in the "vertical way", from ...
2
votes
1answer
30 views
Removing classes from element without affecting css transitions in progress
Ok, I have a situation where I have basically built a little notification dropdown box that happens when the user does something, at the end it transitions to a opacity: 0; state.
However, because ...
126
votes
8answers
154k views
Prevent flicker on webkit-transition of webkit-transform [duplicate]
Possible Duplicate:
iphone webkit css animations cause flicker
For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am ...
0
votes
2answers
36 views
Element change focus transition effect
How can I implement an effect on focus change from element to another element.
Like for example check this site in chrome.
http://webaim.org/
It has some transition effect for jumping focus from ...
4
votes
5answers
95 views
CSS transition width and height from center of div
I have elements with position: absolute; that I want to transition in certain situations. However, the origin of the width and height transition seems to depend on the top/bottom left/right values.
...
9
votes
4answers
16k views
I Want To Apply Delay On Mouse Out in css
I am trying to apply a delay before starting a CSS transition on mouse out event. My CSS code is below, please let me know how to apply time delay before CSS transition on mouse out starts.
I want ...
0
votes
0answers
15 views
Resizing the bootstrap navbar on scoll is not smooth at the end
I could resize the navbar on scroll down but at the end the effect is not smooth, the last step is like a stair step.
To resize I use CSS transition:
-webkit-transition: all 0.4s ease;
transition: ...
0
votes
1answer
28 views
javascript method not called when transitionend is called
I made this animation, when you click on a card, it goes to full screen. When I call a transition end on the card it doesn't go in to the method like I would expect. When I do the same but instead of ...
2
votes
2answers
54 views
Using Javascript animation library VS creating dynamically <style> tags to be injected in the header
We are creating a complex single page application, which allow an user to create animations on some widgets, example a widget button could be animated from left to right and change its opacity during ...
1
vote
1answer
12 views
Issue on Adding Animation Between Adding and Removing Two Classes
Can you please take a look at this demo and let me know why I am not able to generate smooth transition (something like Smooth Scroll) between adding and removing two classes fixed-top and fixed-...
0
votes
0answers
14 views
CSS opacity transitions not working in Safari, but working in JS fiddle
I've created some fade animations on nav-bullets using pure CSS (hover states and css transitions). These work as intended when run in JSFiddle and CodePen on Safari - see here.
However when I place ...
-1
votes
1answer
27 views
reactjs animations - using CSS only transitions
Can some one point me to a simple example using CSS transitions no other libraries in reactjs to animate image from negative to positive right/left positions on component load?
0
votes
2answers
30 views
How to Set Two Transition Durations for Multiple CSS Transforms
I would like the transform: translateY() transition and the transform: scale() transition to have a duration of 1.5 seconds and 0.5 seconds respectively. I can't seem to find a way to do this after ...
27
votes
5answers
12k views
How to create a React Modal(which is append to `<body>`) with transitions?
There is a modal in this answer http://stackoverflow.com/a/26789089/883571 which is creating a React-based Modal by appending it to <body>. However, I found it not compatible with the transition ...
1041
votes
43answers
436k views
How can I transition height: 0; to height: auto; using CSS?
I am trying to make a <ul> slide down using CSS transitions.
The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, ...
1
vote
4answers
41 views
How do I apply a fade effect to this text?
I have this simple HTML and CSS which swaps which span is visible when hovering over it.
I would like to add a fade effect to this, but I added transition: ease-in-out 1s; and nothing happened. Am I ...
-3
votes
1answer
32 views
Transition on bootstrap modal height doesn't work
I'm using a Bootstrap (v3) modal as login screen. The login screen contains a "password forgotten" button which hides the main login form and shows the forgotten password form using simple jQuery.
...
Related Tags
css3 × 2231
css × 2209
html × 911
jquery × 740
javascript × 682
css-animations × 321
css-transforms × 248
html5 × 227
animation × 187
google-chrome × 150
transition × 128
webkit × 125
hover × 109
firefox × 96
angularjs × 93
transform × 80
twitter-bootstrap × 72
safari × 69
transitions × 57
internet-explorer × 52
jquery-animate × 44
svg × 41
opacity × 37
ng-animate × 33
cross-browser × 31
more related tags
Hot Network Questions
- Cheating Cyclic Quine
- "Kind regards" in Russian
- How do you get users to think aloud?
- What is a good alternative for the reverse of a boycott?
- Convenient error analysis
- Why pressure gradient = zero at wall
- If everyone looked the same, what is your identity?
- What is the difference between "der Zug" and "die Bahn"?
- existence of an elliptic curves with given number of points over finite field
- How to set distance between ticks to 1cm
- How to merge multiple hard drive?
- You're not feeling well. You need something.
- How to prevent the use of Speak With Dead?
- Identify a story about a teen boy who learns to use magic with his lizard companion
- Are these try/catch blocks cluttering the code?
- Legal/emotional/behavioral repercussions of a punishment
- Could a big plane glide significant distances, same a ordinary glider (1000 km or about)?
- Mathematics behind this card trick
- What could make a star green?
- In January, for potential weather delays, what is a safe layover time at ORD?
- Some confusion about what a function "really is".
- Can software passwords be bypassed by reverse engineering?
- Draw Clock to help learn time
- How is a Chi-square distribution a gamma distribution if it only has one parameter?
