All Categories
Home » Categories » CSS Tricks

CSS transition Property
Article Number: 7 | Rating: Unrated | Last Updated: Wed, Sep 2, 2020 at 9:06 PM

<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}
</style>

 

Sources:

https://www.w3schools.com/cssref/css3_pr_transition.asp

https://stackoverflow.com/questions/55158038/how-to-animate-alignment-from-top-to-bottom-on-hover

http://sapphion.com/2011/10/25/css3-gradient-transition-with-background-position/

https://codepen.io/nrowe/pen/eafxK
Posted by: Saeed Nobakht - Wed, Sep 2, 2020 at 9:06 PM This article has been viewed 477 times.
Filed Under: CSS Tricks
Article Rating (No Votes)
Rate this article
  • Icon PDFExport to PDF
  • Icon MS-WordExport to MS Word
 
Attachments Attachments
There are no attachments for this article.
Comments Comments
There are no comments for this article. Be the first to post a comment.
Icon Add Comment
Name
Email (Required, but not published)
Comment
Security Code Security Code
 
Related Articles RSS Feed
The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.
Viewed 457 times since Sun, Oct 4, 2020
CSS vertical-align: text-bottom;
Viewed 671 times since Thu, Sep 3, 2020
CSS show/hide next elements
Viewed 454 times since Sun, Oct 4, 2020
Subscribe to knowledgebase
Get notified when new articles are added to the knowledgebase.