transition
The transition property is a shorthand property used to represent up to four transition-related longhand properties:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. So, if we have, say, a box with a red background that we want to change to a green background when it is hovered, we can reach right for the transition property to move between background colors:
Specifying which properties to transition
Notice that we’ve called out the background-color property in the transition declaration. That tells the browser that we’re planning to transition background colors and nothing else when a transition occurs between hovered and non-hovered states. Notice, too, that we told the browser that the transition should take two seconds and follow and ease-out timing function, which means the transition starts fast, then slows down towards the end. You can specify a particular property as we have above, or use a value of all to refer to transition properties:
all specified for the transition-property portion of the shorthand. You may also comma separate value sets to do different transitions on different properties:
For the most part, the order of the values does not matter — unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay. Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable. By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Mobile / Tablet
CSS Transition Left to Right working, RIght to Left
The following tutorial shows you how to use CSS to do «CSS Transition Left to Right working, RIght to Left».
CSS Style
The CSS style to do «CSS Transition Left to Right working, RIght to Left» is
ul !-- w w w . de m o 2 s . co m --> width:100%; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; > li < display:inline-block; width:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; > li:hover~#arrow < opacity:1; > li:nth-child(1):hover~#arrow < margin-left:0; > li:nth-child(2):hover~#arrow < margin-left:100px; > li:nth-child(3):hover~#arrow < margin-left:200px; > li:nth-child(4):hover~#arrow < margin-left:300px; > li:nth-child(5):hover~#arrow < margin-left:400px; > #arrow < margin-left:-50px; position:relative; width:100px; text-align:center; opacity:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; transition:margin-left 1s ease, opacity 0.3s ease; -webkit-transition:margin-left 1s ease, opacity 0.3s ease; -moz-transition:margin-left 1s ease, opacity 0.3s ease; -o-transition:margin-left 1s ease, opacity 0.3s ease; > #arrow:before < content:""; display:block; width:0; border:10px solid red; border-color:red transparent transparent transparent; position:absolute; top:100%; left:50%; margin-left:-10px; > ul < border:2px dashed green; padding:4px; > li < border:1px solid blue; text-align:center; > #arrow < outline:1px dashed red; >
HTML Body
body> ul> li>Menu 1 li>Menu 2 li>Menu 3 li>Menu 4 li>Menu 5 div id="arrow"> Arrow The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> title>Menu arrow follow meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> ul!-- w w w .d em o 2 s . co m --> width: 100%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; > li< display: inline-block; width: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; > li:hover ~ #arrow< opacity: 1; > li:nth-child(1):hover ~ #arrow< margin-left: 0; > li:nth-child(2):hover ~ #arrow< margin-left: 100px; > li:nth-child(3):hover ~ #arrow< margin-left: 200px; > li:nth-child(4):hover ~ #arrow< margin-left: 300px; > li:nth-child(5):hover ~ #arrow< margin-left: 400px; > #arrow< margin-left: -50px; /* border:0px solid red; */ position:relative; width:100px; text-align:center; opacity: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: margin-left 1s ease, opacity 0.3s ease; -webkit-transition: margin-left 1s ease, opacity 0.3s ease; -moz-transition: margin-left 1s ease, opacity 0.3s ease; -o-transition: margin-left 1s ease, opacity 0.3s ease; > /* faking a triangle using borders and pseudo element :before */ #arrow:before< content:""; display:block; width:0; border:10px solid red; border-color:red transparent transparent transparent; position:absolute; top:100%; left:50%; margin-left:-10px; > ul< border: 2px dashed green; padding: 4px; > li< border: 1px solid blue; text-align: center; > #arrow< outline: 1px dashed red; > body> ul> li>Menu 1 li>Menu 2 li>Menu 3 li>Menu 4 li>Menu 5 div id="arrow">Arrow Related
- CSS transition jump to center
- CSS Transition Jumpy / Jerky
- CSS Transition Jumpy / Jerky (Demo 2)
- CSS Transition Left to Right working, RIght to Left
- CSS Transition Left to Right working, RIght to Left (Demo 2)
- CSS transition smooth
- CSS transition with overflow
demo2s.com | Email: | Demo Source and Support. All rights reserved.
How to Slide in From Left Transition in CSS
One of CSS3’s innovations is the ability to create transitions and animations with behaviors. CSS3 animation can be used in numerous keyframes to change an element’s appearance and behavior. An animation establishes many transition points based on distinct keyframes, whereas transitions allow you to go from one state to another.
Throughout this article, we will examine:
All right let’s get started!
What is transition-property in CSS?
The “transition-property” enables us to modify the property’s values smoothly according to the specified duration. It occurs when the CSS property changes its value from one to another without flashing. Depending on its state, it can be hovered or active. Now, let’s move to the syntax of the transition-property.
There are two things you need to specify when creating a transition effect:
Follow the following syntax to add a transition effect using the transition-property:
In the place of value, add an effect of transition you want to apply.
Follow the below-given syntax to add the duration effect using the transition-duration property:
Depending on your preferences, you can also add a transition delay and a timing function.
Here is an example in which we implement the slide-in transition.
How to Use transition-property in CSS?
We can use “transition-property” on any element such as div, heading, button, and many more.
By using an example, let’s see how the transition property works.
Example: How to Slide in From Left Transition in CSS?
The following example, we will create a heading inside the :
When we execute this HTML file, it will show the following outcome:
Here, we can see that a simple heading is presented. Now we will move to the CSS section, where to apply the transition property to the created container. For this purpose, we will write the following code:
div {
width: 150px;
height: 150px;
background: goldenrod;
transition-property: width;
transition-duration: 1s;
}
The above code block serves the following functionalities:
width and height: The size of div is “150px” in width and “150px” in height.
background: The color of the div is set to “goldenrod”.
transition-property: We have set the transition property to width; through this, it will slide from left in transition.
transition-duration: “1s” or one second is the transition duration. When we move the cursor out of the div, within one second, it will go to its original state.
Note: Whenever the CSS width property changes, the transition effect will start.
Now take a new value for the width property that will be used to mouse over the div element. The size of the width property is set to “500px”. It will slide from the left-to-right when will a cursor moves onto the element, and when you move the mouse out of the element, the style will gradually return to its original state:
After that, go to the HTML file and execute it. It will give the following output:
Having applied the transition property to the div, we can now see that it is active.
Conclusion
In CSS, for slide-in from left transition, the “transition-property” is used. You can set the effect of transition and its duration using the “transition-property” and “transition-duration” properties, respectively. With the help of an example, this article demonstrated how the transition property is used for sliding from left to right.
About the author
Anees Asghar
I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.