Skip to content
Tech Shizz Logo

An Engineers Blog

  • TechShizz
  • blog

CSS3 | Transitions

Posted on February 23, 2021 By rich No Comments on CSS3 | Transitions

In order to do transitions in CSS this is the code we need to add to the root selector. For example, if we want to make the logo rotate on hover, we would add this to the ‘logo{} selector.

	/* css3 transition */
	-webkit-transition:-webkit-transform 1s;
	-o-transition-property:-o-transform;
	-o-transition-duration:1s;
	-moz-transition-property:-o-transform;
	-moz-transition-duration:1s;
	transition-property:transform;
	transition-duration:1s;

This code only enables the ability for transitions on these properties, so we must specify what we want on the selector we need. 

#logo:hover
{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

 

Post navigation

❮ Previous Post: Exchange Transport Service won’t start
Next Post: Message Tracking in PowerShell ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Subscribe to our newsletter!

Recent Posts

  • How to implement a lightning-fast ransomware playbook
  • How to achieve defence in depth in your business
  • How to implement a SecOps team phishing response plan
  • How to block an Office 365 Sign-in correctly
  • Microsoft finally patched serious Exchange 0-day over a month old!

Recent Comments

    Archives

    • November 2022
    • July 2021
    • March 2021
    • February 2021

    Categories

    • Cyber Security
    • Uncategorized

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org

    Copyright © 2023 .

    Theme: Oceanly News Dark by ScriptsTown