Questions tagged [css-transitions]

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. CSS Transitions were introduced as part of the CSS3 specifications.

How CSS3 Transitions works?

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

The following is all the transition properties:

transition - A shorthand property for setting the for transition properties into a single property

transition-delay - Specifies when the transition effect will start

transition-duration - Specifies how many seconds or milliseconds a transition effect takes to complete

transition-property - Specifies the name of the CSS property the transition effect is for

transition-timing-function - Specifies the speed curve of the transition effect


Reference Links and Documents:

  1. CSS3 Transitions - W3C Doc Link

  2. CSS Transitions - MDN Link

6226 questions
2
votes
1 answer

how to make transition ellipse in css

So, I have sidebar that just display some of its content, when it hovered it will display all the sidebar width. this is the CSS code: .sidenav { height: 100%; width: 100px; position: fixed; z-index: 2; top: 0; left: 0; …
Rian
  • 161
  • 3
  • 14
2
votes
2 answers

how to make coin flip transform in css

So, I have an icon, a circle icon, I want to make this icon when it hovered it will has coin flip transform, just like https://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html but it flip two times so it goes back to the first…
Rian
  • 161
  • 3
  • 14
2
votes
1 answer

Reversing CSS transition on removal of class

I'm trying to get a CSS transition to work in a particular order. Step 1) On click (on adding a class), I want the element to expand horizontally and then vertically Step 2) On the next click (on removing a class), I want it to reverse the…
asdf
  • 53
  • 6
2
votes
2 answers

CSS Transition border reverting instantaneously

Why does the border disappear instantaneously and not slowly like the other properties? Note: in ie the border appears instantaneously instead of the 2 second delay. .figure { height: 160px; width: 160px; background-color: red; …
Robert
  • 10,126
  • 19
  • 78
  • 130
2
votes
3 answers

CSS animation, fade in background on hover, stay, and go back to previous after a delay

Lets say I have a HTML element which red with transparency. When I hover the element it should turn a solid red. When I stop hovering the element it should animate back to the first state, but only after X seconds. So far so good, see code snippet.…
just_user
  • 11,769
  • 19
  • 90
  • 135
2
votes
1 answer

Same value of transformations but different order. Why the rotation degree is different?

You can see the same transformations, only thing which differs is order of them. When the order of them is different, rotate will animate (360-0)%360deg.But when the order of them is same too, rotate will animate (360-0)deg. I know I should ensure…
Theer
  • 53
  • 5
2
votes
1 answer

css transition animation doesn't work for decreasing size of image

CSS Transition for increasing size of image works, but doesn't work for decreasing. Does anyone know how to fix it? var app = angular.module('myApp', ['ngAnimate']); app.controller('myController', function($scope){ $scope.myImgClass =…
이신우
  • 39
  • 3
2
votes
0 answers

CSS transition-property: all; performance

I'm curious is using transition: all 0.2s; has any performance implications vs. specifying properties explicitly. Let me show you what I mean: .button { // I want to transition the border- & background-color on hover border-color: lime; …
Dave Lunny
  • 750
  • 8
  • 21
2
votes
1 answer

Anchor tag click not working in CSS slider

I would like to use the following CSS slider in my project http://jsfiddle.net/63w9jnqq/1/ It does not using any JavaScript or jQuery. When I clicking on the link from any slide other than the 'slide 5' takes me back to the first 'slide 5' instead…
2
votes
1 answer

Image doesn't display when css filter applied with a parent transition

I have a weird bug on Edge browser. Scenario I have a filter applied to an image to make it greyscale and inverted, which is removed upon hovering on the image. However these are only shown upon a hover "max-height" transition to the parent…
Jamie Barker
  • 8,145
  • 3
  • 29
  • 64
2
votes
2 answers

Responsive image hover caption

The problem I am facing is that the hover caption .caption-text and overlay .blur are fixed width and height whereas the image is responsive. Any suggestions on how to modify this code to make the the overlay and caption fit the image width and…
Lisa Jaffé
  • 51
  • 1
  • 8
2
votes
1 answer

How to add background image to spark animation banner?

I have provided a codepen snippet of a spark animation using tween-lite. I have tried adding background image to snippet.But it didn't work. Anyone please help to add background image CSS: body { background-color: #13001C; } html, body { …
2
votes
1 answer

How to stop slight blinking of image when the looped animation stops?

I have created a snippet of looped animation of a image shaking effect.But there is slight blinking of image after every loop stops.It decrease the originality of animation.Please help me to solve this issue. function afterReveal (el) { //event…
2
votes
4 answers

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 entering the code below, the console spews this out…
Calvin Yee
  • 32
  • 1
  • 5
2
votes
2 answers

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 appearing without an animation . How can I make window2…
user5739753
1 2 3
99
100