FAQ Database Discussion Community


CSS Transition Effect :: Text changing color, but not border

css,hover,border,css-transitions,border-color
I'm trying to apply a transition effect to some icons. The transition works for the font (FontAwesome), but not for the border, and I'm not sure why. Been trying since yesterday, combed through the web including stackoverflow, but nothing. You can see the example here, and here is the code:...

Weird CSS Transition Issue

html,css,css3,safari,css-transitions
I'm using transition property in CSS in the navigation on my website. The navigation consists of 3 images. When you hover the image with the mouse, a transition is applied that displays an overlay with some text. This all works beautifully in Chrome and Firefox. Safari, however, is a mess....

Hide element after fade out using only CSS

css,css-transitions
I have a one pager that shows one page at a time and that uses animation when transitioning from one page to the next. It works like this: The user clicks on a button An ajax call is done and while waiting for the response the page fades out (opacity:...

Animate :target element on target event in CSS3

css,css3,animation,css-transitions
I am building a lightbox based on the CSS3 selector :target which selects an element based on the hash in the url. I want to animate the target element on the :target event, but this doesn't seem to work. Let's say we have a div #banana which is shown when...

jQuery .show combined with CSS transition

jquery,css3,css-transitions,show
Coming from Animate element transform rotate (Answer of Dyin) I still can't get it to work properly. I want to fade in a div with jQuery .show(). This div is containing an img. Now I want that img to be zoomed in slowley with css transition and scale (not jQuery,...

Fade in div one after another with delay

jquery,html5,css3,css-transitions
I want to do something like this the images should fade in from the right and scale into 100% then fade out into right and vice versa and that's my code the problem is when the second .spinner fade in it behave different than the first one and when it...

CSS prevent multiple transition on div children

css,css-transitions
.product-item :hover{ transition: background-color 0.5s ease-out; background-color: lightgrey; cursor: pointer; } .product-item * :hover{ transition: background-color 0s; } It seems that applying the transition effect on the parent div affects the children as well. This causes a bubble down effect and looks very ugly. It actually looks like multiply children...

Can't change element's border colour on hover

css,css3,button,css-transitions
I am trying to change the triangle's colour when the user hovers over the button. I have tried applying a style to the hovered child element of the button and it did not work. How can I get the triangle to change colour on button hover with the normal button's...

CSS background-color transition not working in specific browsers (desktop + mobile)

css,safari,mobile-safari,css-transitions,transition
I have this SCSS that, in theory, should transition the background color smoothly, but it is not smooth in specific browsers. See this codepen for a demo: http://codepen.io/ahegyi/pen/Wvjajy (Click on the photo or note text to activate the transition. It's more obvious if you click on the text.) .overlay {...

Animating margins and padding with CSS Transition causes jumpy animation

css,html5,css3,css-transitions
At my personal website, I'm using the CSS3 Transition property on the top nav to animate the margins and padding of an element with a border, to make the border swell on hover. Relevant markup: <nav> <a class="email" href="mailto:notmyrealemailaddress"> <div class="icon-border"> <img src="images/mail_icon.png" width="14" height="12"> </div>Email Me</a> <a class="phone" href="tel:4075555555">...

Transition not working without querying width property

javascript,css3,css-transitions,css-transforms
I want to animate a translateX with transition on a click event by adding a class to the div in the js. The transform and transition properties are added in the css file. var widget = document.getElementById('widget'); widget.style.display = 'block'; document.getElementById('widget2').clientWidth; //comment this line out and it wont work widget.className...

Transition icon when hover

javascript,css,css3,css-transitions
I've this code .pictos { display: block; height: 70px; margin: 160px 0 30px; padding: 0 17%; width: 100%; } .pictos > div { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); border: 1px solid #fff; border-radius: 50%; display: table-row; float: left; height: 70px; width: 70px; margin: 0 0...

CSS image opacity transition on text hover

css,css3,css-transitions
I'm stuck trying to get the image to fade in and out when you hover over/out on the text. This is the code. I need help with what to add to make it so the image will transition in from 0 opacity to 1 when the text is hovered over...

React js css transitions on class removal

twitter-bootstrap,reactjs,css-transitions
I have column that should have different width depending on some flag. I use Bootstrap, so I assign col-xs-12 and col-xs-2 depending on the flag. Now I want it to change width slowly with css transition. I've read official React.js doc about transitions, but it doesn't apply to my case:...

Issue with Jquery TransitionEnd event. Animation doesn't complete

javascript,jquery,css,css-transitions,transitionend
I have been struggling with this one for some hours now, and found out that it's better to ask for help here.. Situation .rightnav.front is clicked for DIV1. DIV1 moves to the right, and opacity is lowered DIV1 moves back left, and at completion opacity is 0 DIV1 gets class...

How to perform Javascript/CSS3 animation starting from unknown value?

javascript,css,css3,css-transitions,css-animations
I have a <div> whose height I don't know at page load. How can I make it slide into view when page loads, and sticking to the bottom of the page? I expected this code to work, but the div just jumps straight into view without a smooth animation. var...

directive and d3, very first transition being ignored

angularjs,d3.js,css-transitions
In a directive I'm trying to apply transition with d3 (to html elements, not SVG), but strangely the very first time it gets ignored. d3.selectAll('h1') .transition() .duration(2000) .style('-webkit-transform',function(d,i){ return "translateX("+(i*30)+"px)" }) check this jsbin, when it's initially rendered, click... and elements will just jump (with no transition), if clicked any...

CSS transition: go to one value and then to another

css,css3,css-transitions
I want to create an animation with two steps: first the css property goes to value A and when it's done, go to value B. Is this possible with css transition alone without jQuery? I would like to achieve something like this with pure CSS: http://jsfiddle.net/t2w2btow/1/ $( document ).ready(function() {...

Font disturbtion on css transition

css,css3,firefox,fonts,css-transitions
I use CSS3 transition for hover effect on products, a tag comes up from bottom over product image : While the tag is coming up and after it comes up for about 0.5 second, the font is not smooth and clear, but about 0.5 ~ 1 second after transition finishes,...

PURE CSS3 slide up, down, left, right transitions without animate.css

css,css3,css-transitions,css-animations
I am building a text-only menu (client requirement) as some of their clients will need to navigate without JS turned on. The menu works for all intended purposes but I wanted to "beautify" it a little by adding CSS3 transitions to the way the menu dropdowns on hover and flies...

How to transition from a triangle to a circle

html,css,css3,css-transitions,polygon
I have some images masked with clip-paths in CSS to show equilateral triangles. I want them to expand and become circles on hover. Here's my CSS: .tri-Up { -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); transition: 2s; } a:hover .tri-Up, a:focus .tri-Up {...

CSS transition not triggered on window resize

jquery,html,css,css3,css-transitions
So I have this site built out, with a navigation bar at the top. I wanted it to be responsive, so I added a media query to hide the navigation items when the window gets narrow. Then a little "menu" button appears instead, and when you press it, it reveals...

Hide an element after 5 seconds only CSS does not work on Firefox

css3,css-transitions,css-animations
For hiding an element after 5 seconds, I have used below code. But it does not work in Firefox. .classname { -webkit-animation: cssAnimation 0s ease-in 5s forwards; -moz-animation: cssAnimation 0s ease-in 5s forwards; -o-animation: cssAnimation 0s ease-in 5s forwards; animation: cssAnimation 0s ease-in 5s forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }...

Ionic + AngularJs custom css transition not working

html,css,angularjs,css-transitions,ionic
I'm currently writing an Ionic + AngularJS app. On a specific page I want show / hide a div based on swiping. I have this behaviour working but as you can see in the gif below there is a problem when the div moves from the bottom of the page....

CSS fading multiple images. Delaying opacity transition. Webkit transition delay

jquery,css,css-transitions,fadein,opacity
I am trying to fade in 3 images stacked on top of one another. Using just CSS transitions. Here is my codepen: http://codepen.io/FredHair/pen/MYQZJv?editors=110 I have managed to fade into the first image but am unsure how to correctly delay and fade into the third image. I have found alot of...

How to properly apply a css hack for IE11 transition misbehaviour

css-position,css-transitions,internet-explorer-11,revolution-slider
I am experiencing elements transition misbehaviour into my page, IE(11) only; The fullscreen revolution slider, remain in place doesn't move with the wrapper when the left slider is opening (clicking on info+ button like we have in Chrome/Firefox). Thanks to @afelixj, I've tried to use this css hack for IE...

Keyframes doesn't work when keyframe-class is added

jquery,css-transitions
I have a user card that when gets opened, shows the user's picture. (https://jsfiddle.net/xv036sny/2/) This works, but what I want to achieve is to make a more complex animation using CSS Keyframes. .userCard__image-shown{ transform: scale(1); } Im trying this by adding keyframes to the class .userCard__image-shown @keyframes test{ 0% {transform:...

Transition when switching classes in Twitter Bootstrap 3

javascript,jquery,css3,twitter-bootstrap-3,css-transitions
I'm using Twitter Bootstrap 3 and have a DIV containing a picture or video. the div is col-sm-3, but using a jQuery I switch that class with a col-sm-12 on hover. Is there any way to make a smoother transition and add some effects when the resize happens? Thanks.

Chrome opacity transition bug

html,css,google-chrome,safari,css-transitions
So i'm trying to build a link page with 2 divs. Both covering 50% of the screen. I would like to keep this 100% CSS, because I don't want to use javascript and I am not familiair with Jquery. My problem seems to be a bug, according to lots of...

toggleClass() for resizing circle after Paper Ripple

javascript,jquery,html,css-transitions,polymer
I'm trying to make a circle with the paper-ripple animation that when clicked, transitions to a much bigger circle. This exists on a very wide <div> that can be scrolled through with a button, rather than the scroll-bar. HTML: <link rel="import" href="https://www.polymer-project.org/0.5/components/paper-ripple/paper-ripple.html"> <div class="main"> <div id="hero"> <div class="slide"> <div id="background"></div>...

Transition animation need some CSS

html,css,css-transitions,transition
I am trying to make a page load transition effective div. This is my DEMO FULL PAGE full page from codepen.io and also this is example page with code DEMO WITH CODE If you open the demo full page then you can see there is a one image and this...

Using JQuery toggleclass to manipulate click transitions

javascript,jquery,css3,css-transitions,toggleclass
I am trying to make a nice transition when clicking a button. The button is basically a div which triggers a Jquery function. The button consists of some text and a FontAwesome icon. I want to use JQuery in a way that when I click on the button, the FA...

Transition Animation on Position Property

css,css-transitions,css-animations
I'm attempting to animate a property of position, but can't seem to get it to work. The non-hover CSS is: background: rgba(0, 0, 0, 0.7); position: absolute; bottom: 0; width: 100%; -webkit-transition: all 1s ease; transition: all 1s ease; And the hover is: top: 0; -webkit-transition: all 1s ease; transition:...

Fixed position misbehaviour in IE11

css,internet-explorer,css-position,css-transitions,internet-explorer-11
I am experiencing elements position misbehaviour into my page, in IE(11) only; live link here. The logotext, the menu and the left sidebar text, remain in place doesn't move with the wrapper when the left slider is open (clicking on info+ button). I've read about position: fixed + transition in...

How to achieve CSS transitions with delay timers but without any easing function?

css-transitions
I want to have my styling transition after a timer, but transition without any easing. So for example, change background color from white to purple immediately after the timer. .text { display: inline-block; border: solid 1px #9e9e9e; color: #333; background: #f1f2f2; margin: 7px; padding: 7px; font-family: sans-serif; } .text:hover {...

fade out transition with keyFrameAnimation - ThreeJS

three.js,css-transitions,keyframe
I have 2 different map cubes. After 10 seconds I want the first map cube to fade out and the second map cube to fade in. I was told to use keyFrameAnimation but the only examples I've seen are to make an object move or rotate. If anyone has any...

CSS3 Animations being triggered on display change

css,css3,animation,css-transitions
I am trying to use CSS3 animations in order to fade elements in on page load. With this I need to set the element to display: none; and then back to display: block;. I only want the CSS3 animation to be used on the initial load of the element and...

Rotating div elements with CSS transform on IE

html,html5,css3,css-transitions,css-transforms
I've got the following CSS hover effect that behaves properly on all browsers but it doesn't on IE. They are three divs, one parent, two children. I want to rotate the parent div in order to show the child's content. you can see the code in https://jsfiddle.net/drz338r9/11// I really appreciate...

Changing border-bottom to border-top

css,css-transitions,pseudo-element
I want to have a transistion on my menu list when hovered but I want to change the border-bottom to border-top. How can I do this? .sliding-middle-out { display: inline-block; position: relative; padding-bottom: 3px; } .sliding-middle-out:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition:...

Expand border from center on hover

css,css3,border,css-transitions
I'm trying to get a transition effect on border that the border expands right and left from center. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out,right 250ms ease-in-out; opacity: 0; } h1:hover:after {...

What is causing this CSS Transition delay, specifically with colours in Chrome?

css-transitions
Using CSS transitions on most properties runs as expected, except this issue I am having with colours. I have set up a demonstration pen here. When transitions are instructed to change the color property, they all queue after each other instead of happening all at once. This seems limited to...

relative positioning with transition effect

css,css3,css-position,css-transitions
I have six boxes with caption. I want caption to slide in up on mouse hover event. I am facing two problems while doing this. If I use position:absolute, Figure captions would have lost their center alignment. If I use position:relative, Figure captions would have became center aligned but they...

CSS transition on :after is not working

html,css,css3,css-transitions
I am trying to create a custom switch checkbox. Here it is when its un-selected and when it is selected Which is okay apart from the CSS transition is not working, and the switch jumps when toggling even though I am using: -webkit-transition: all .1s linear; -moz-transition: all .1s linear;...

Add line transition above and below text

html,css,css3,css-transitions
this question is a follow on from my previous question. I have some style used from this website, to create a slide in underline effect, please see example on this jsfiddle. My previous question was asking how to adapt this so the line came in from right to left, and...

Animate CSS Gradient in Bootstrap nav

css,css3,twitter-bootstrap,css-transitions,css-animations
I am working with bootstrap atm and notice my simple css nav button transition wasn't working. I put this down to bootstrap but then removed my gradient background and just had a solid background color and it worked. Does a spec for CSS gradient transitions, does this exist? Is there...

Animation transitions behave differently for ng-hide-remove and ng-hide-add

javascript,css,angularjs,css-transitions,css-animations
I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles. I have successfully managed to have the div slide in from the left,...

Javascript applied CSS3 transitions not working on new element

javascript,html,css3,css-transitions
I'm using a mixture of CSS/JS to create some simple page slide transitions for new pages, that will eventually be loaded dynamically by AJAX, however on creation of the new element "main2" which has the necessary -webkit-transition etc. it does not slide in like it should, but simply appears. The...

Width transition on a absolute positioned unordered list

css,css3,css-transitions,transition
I want to animate the width of a unordered list. The width is determined whether the texts associated with a icon (in the fiddle represented by some characters) is displayed or not. Basically if the spans are shown the width of the menu is increased - i want to animate...

Compound perspectives with CSS 3d transformations

css,css3,3d,css-transitions,css-transforms
I'm trying to build a simple game with 3d CSS whose structure resembles Stratego, or any other game with upright cards that get toppled: Setting the perspective of the board is easy: <div id="table"> <div id="board"></div> </div> With CSS: #table { perspective: 1000px; perspective-origin: 50% 50px; margin: 0 auto; width:...

Position Images/Background Images Relative to Mouse

javascript,css,css3,css-transitions
I would like to know what an efficient way is to animate positions of images (or background images) in relation to the mouse. Take Github, for example: https://github.com/thispagedoesntexist This is one hella sexy 404 page. I want to make an impact on my users, and this surely does so in...

Javascript transitions on DOM elements

javascript,html,css-transitions
I'm displaying elements from an array inside a div. Clicking "next" or "previous" cycles through the list of array elements in order. I would like to add a transition effect to the displayed content when it switches. var theArray = ["1","2","3","4","5"]; var dancefloor = document.getElementById("dancefloor"); var prev = document.getElementById("prev"); var...

Hover Transition in Bootstrap Navbar Menu

css,twitter-bootstrap,hover,css-transitions
I found this codepen, where a css transition is used to archieve a sliding effect on hover. http://codepen.io/tdevine33/pen/CnDyv But I can't make it work on my bootstrap navigation bar. Is it incompatible with the Menu in Bootstrap? <!-- Static navbar --> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button...

Do I need to duplicate the CSS Transition statement?

css,css-transitions
I was reading the mozilla developer docs for CSS Transitions. In their simple example, they put the transition statement on the element and the pseudo-class "hover". #delay1 { position: relative; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; font-size: 14px; } #delay1:hover { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; font-size: 36px; }...

CSS Mask Reveal Element

css,css-transitions
I have to have an element be revealed in a masked animation, and I have created two different methods to accomplish this. I am unsure of how to determine which one is going to be more efficient however. The end goal is for the animations to be used on a...

css3 transition is not smooth in safari

javascript,css,css3,css-transitions
I'm rebuilding someone's else CSS3 transition to make it work across Safari, Chrome, and Firefox. In their version (mouse over the package images), the transition works well in Safari, but not in the other two: The elements get stuck in the "up" position. In my version, the transition runs smoothly...

Transition input width

html,css,css-transitions
I have the input search field. When I click on it I need it to become wider performing smooth transition from right to left, i.e. the input is located on the right side of the page and when I click on it it should stretch to the left in some...

Neither switchClass nor addClass().removeClass() methods working

jquery,jquery-animate,css-transitions,animate.css
I feel like I'm doing this exactly the way I've read online. I actually can get toggleClass to work in a limited way (Toggle sort-of success but not really), but the problems with that method have led me to try switchClass and add/removeClass instead. But... neither does anything when I...

css3 transition on background image doesn't work in Firefox

javascript,jquery,css3,css-transitions
This is a follow up to my question here: jquery UI add class with animation does't work See the new jsfiddle and try this in Firefox: http://jsfiddle.net/40mga4vy/3/ -webkit-transition: all 2.0s ease; -moz-transition: all 2.0s ease; -o-transition: all 2.0s ease; transition: all 2.0s ease; This code in combination with some jquery...

Smooth mouse-out animation

css,css3,css-transitions,css-animations
I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation. I can't work it out how to ensure smooth going back to the original state when not hovering anymore? So far it "jumps" when the diamond is in the middle...

CSS3 transform transition stutters when value changes frequently (not performance related)

css3,animation,transform,css-transitions,transition
I'm currently building a compass app in HTML and CSS in a PhoneGap project with the DeviceOrientation plugin to get the compass heading. I created a jsbin to emulate the heading change. The problem I'm having is that when the value changes frequently (every 200 ms), the CSS transition stutters...

CSS how make an element fade in and then fade out?

css3,css-transitions,fadein,fadeout
I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css: .elementToFadeInAndOut { opacity: 1; transition: opacity 2s linear; } Is there a way I can make the element fade out after it fades in by editing css for...

CSS: Preventing a property to affect on element until the end of transition

css,css3,css-transitions,z-index
We've some boxes to show some data on hover. So, when we move mouse over one element, it should expand, get in front of other elements, and show the hidden data. I did something like this: box:hover { z-index: 50; } But there's one problem; When we move mouse on...

fade in then fade out after some time by using css-transitions

javascript,jquery,css,css-transitions
I'd like to fade in, wait some time, then fade out an element of homepage using jQuery's addClass and removeClass This JS-code fades in the div but doesn't fade it out. I'm using jQuery 2.1.3 if ($("#save-success").hasClass("fadeout")){ $("#save-success").removeClass("fadeout").addClass("fadein", function() { $(this).delay(2000).removeClass("fadein").addClass("fadeout"); }) } I've got this CSS: .fadein, .fadeout {...

Translate with CSS to the top of a div

html,css3,css-transitions,translate-animation
I have 3 boxes within a fluid container. Each box has a heading title, an icon and some text below. On :hover I want the icon to move to the top of the <div> and change it's size, I have managed to "achieve" it but using certain number of pixels....

Why is my CSS3 transition delaying before it starts?

css3,css-transitions
Either I've misunderstood how it's working, or it simply isn't working. I have the following CSS: transition-property: max-width; transition-timing-function: linear; transition-duration: 5s; transition-delay: 0s; What I expect is that when I click the button, the transitions starts and ends 5 seconds later. What happens is that after I clicked the...

Slowly expanding text

css,css-transitions
I am trying to make expanding text in CSS. What I need is a part of hyperlink to show when you hover on it. What I have is this JSFiddle but there's a line height issue with that particular font. I also cannot get rid of line-height and for some...

Why do CSS transitions occur for unshift() and not for shift() in ng-repeat lists?

javascript,arrays,angularjs,css-transitions,ng-repeat
I'm moving some elements in the page using ng-repeat and CSS transitions. If I change the data array using unshift the list transitions nicely. (In my application I'm transitioning position as well as opacity.) If, however, I use shift to update the array, the DOM is updated immediately with no...

Add X pixels to current position CSS

html,css,css-transitions
So, I'm trying to recreate a .gif I found online in pure CSS. However, I've run into a problem when creating the animation-part of this. Here's the GIF I'm trying to recreate: As you can see, the source image breaks up in: 3 walls 9 columns 27 cubes And then...

Picture show text on hover as “rollover”

html,css,css3,hover,css-transitions
I want to make a "roll over text" when you hover the image container. I did it fine, but only with position absolute, but i cant get it right with position relative. Now the Text comes after the Image but i need the text as an small overlay to the...

CSS Transitions On Computed Styles

html,css,css3,css-transitions
Is it possible to transition css on what the computed style becomes, not what that style is explicity set to? Example I have the following CSS/HTML .grow { transition: height 1s ease-in-out; } .hidden { display: none; } <ul> <li> <div class="grow"> <ul class="hidden">...</ul> </div> </li> </ul> Then if I...

IOS Safari transition transform not working

ios,safari,css-transitions,css-transforms,vendor-prefix
Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able...

CSS Transition not working accordingly

html,css,css3,jade,css-transitions
Not sure what I'm doing wrong here. The hover is definitely working, as the top and bottom properties get changed, but the transition just isn't there. .info{ position:absolute; transition: opacity 2s; top:0px; bottom:0px; right:0px; left:0px; background:rgba(0,0,0,0.8); color:white; text-align:center; justify-content:center; display:none; opacity:0; } .content ul li:hover .info{ top:-10px; bottom:10px; opacity:1; display:flex;...

Animate an element that moves to occupy empty space with CSS only

html,css,css3,css-transitions
http://jsfiddle.net/kscjq0y0/ I want to animate the movement of the yellow div when the red one disappears. I know it can be done with jQuery animate but I want a CSS3 solution (even if it's not fully supported by all modern browsers). I've tried the CSS transition property but doesn't seem...

Trouble with transitioning background Image with JQuery

javascript,jquery,html,css,css-transitions
Edit I figured out that it is actually fading out, it just removes the background image before it starts the fade so I can't see it...duh. I just removed the .css('background','') so it fades out now. Some of my css styles still are not affecting it though. Somehow it is...

Fullscreen CSS3 “Cube” Transition

css3,css-transitions,css-animations,css-transforms
I am using the code provided here: S/O 2-face Animated Cube I want to make this effect fill up the entire screen of the webpage to provide a fullscreen transition from one div/iframe to the next. I tried using percentages: <style> #experiment { -webkit-perspective: 1000; } html,body{ margin: 0; height:...

Javascript Get Element CSS Transition Stage

javascript,css,css3,css-transitions
Is it possible to get which stage of a CSS transition an object is in with Javascript, without the use of a interval, or relying on a starting timestamp? I know that transitions can be strung together, but I'd rather avoid that if I can. For example for a div...

Animation with CSS selector not working

html,css,css-selectors,css-transitions
My HTML: <div id="composite-field"> <input type='email' name='email' class='input animate' value='' placeholder='E-mail'> <input type='submit' id='submit' class='submit animate' value='>'> </div> My CSS: .animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } html body div.body-container form div#composite-field { position: relative; float: left; width:...

How to fade multiple background colors after few seconds? [duplicate]

css,css3,css-transitions
This question already has an answer here: Is it possible in CSS to transition through a third color when using a hover transition? 3 answers I want to know how can I change the background color after couple of seconds in css? For example I want 3 colors: blue,...

Bring an overlapping css3 transition to the front with z-index

html,css3,css-transitions,z-index
I am creating a portfolio page to display some images. I used the CSS3 transition to expand out the thumbnail to a full size image when you hover over it but the other thumbs stay in front of the expanded element. I tried using a z-index to force them to...

How to ignore an transition based on javascript

javascript,html,css,css3,css-transitions
Heyy guys, At first I want to apologize for my bad english. I am making an site wich you can find here for the moment: http://rekenopjetoekomst.nl/test/test.html When you scroll down the height of the foto under the menu will decrease. But the arrows that you need to navigate trough the...

CSS color-transition not working on :hover

html5,css3,colors,css-transitions
Another question with using CSS. I would like to have the header's background-color transitioning from it's current to another when hovering (due to multiple sites having different colors). I made a CSS-transition-animation for it, but it doesn't seem to be working. What am I doing wrong? #header { background-color: #3cff9c;...

Slide out from right on hover, slide in from left on mouse out

css,css-transitions,keyframe
http://jsfiddle.net/vladimir_ze/ror4ccry/ I'm trying to achieve two sliding effects using CSS. On hover, arrow should slide out of the box (moving right), that's not problem. On mouse leave, arrow should slide in to the box (from left) I tried to do it with transitions but I'm not sure if this can...

Text shaking when using css transition and scale()

html,css,css3,css-transitions,css-animations
I have searched everywhere, including SO, but no one seems to find an answer. My issue is that when I hover an element using transform: scale(1.2) and opacity, the element grows, which is fine, but the text/content shakes or wiggles as it appears and scales. Is there a way to...

webkit transition rule not working at all in Safari

css,css3,safari,css-transitions
I have the following CSS transition rule: .headroom { -ms-transition: transform 200ms linear; -webkit-transition: transform 200ms linear; transition: transform 200ms linear; } But latest version of Safari (8.0.6) is not detecting the transition rule: Why? What am I doing wrong? ...

CSS animated hamburger icon and remove class on scroll?

javascript,html,css,css-transitions
I want to achieve 2 things when in responsive small screen size: Create a onclick CSS animated 'hamburger' icon into a cross icon (now it is just a fadeIn/Out effect). Remove class on scroll event so cross icon turns back in default hamburger icon. I'm now using svg images for...

collapse transition not working with angular's UI Bootstrap

angularjs,css-transitions,angular-ui-bootstrap
I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition. Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a...

Smooth Infinite Scrolling Banner [CSS Only]

css,css3,css-transitions,css-animations,infinite-scroll
Looking to optimize this infinite scrolling effect, however I'm not entirely sure how to create a smooth transition when looping back to the original image. At 10s it's hardly noticeable, however at 30s it's more evident. I'm assuming it has something to do with the ending position margin, but can't...

Creating a CSS 'path' on hover

jquery,css,css3,css-position,css-transitions
I'm trying to generate a 'nice' CSS menu using (mainly) CSS, but with a tiny bit of jQuery as well: My overall idea is: +------------------------+ | | | | | +---+ | | | | | | |___| | <-- Hover this center piece | | | | | |...

Opaque transition using active class

css,css3,css-transitions,opacity,pseudo-element
I need help with CSS. I am trying to make it so a div's opacity is set to 1 when another div is clicked as a transitiion. I can only use CSS so I was trying to find out how I could use the active class to do this or...