Playing a CSS animation on hover

Developer
Val Head
Size
2,424 Kb
Views
40,480
  1. Playing a CSS animation on hover Previews
  2. Playing a CSS animation on hover HTML Codes
  3. Playing a CSS animation on hover CSS Codes

How do I make an playing a css animation on hover?

A little example showing how animation-play-state can come in handy. The video tutorial version is on vimeo: http://vimeo.com/61477511. What is a playing a css animation on hover? How do you make a playing a css animation on hover? This script and codes were developed by Val Head on 03 August 2022, Wednesday.

Playing a CSS animation on hover Previews
IQ Test

Playing a CSS animation on hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing a CSS animation on hover</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body {padding:4em; background:#fcfcfc;}
.wrap {width:200px; margin:auto; z-index:1;}
.msg { color: whitesmoke; text-align:center; font-family: 'Bree Serif', Courier, monospaced; font-size:3.5em; width:200px; position:absolute; margin:55px 0 0 2px; pointer-events: none;
}
.sticker { width:200px; height:200px; position:absolute; background: url(https://dl.dropbox.com/u/1143870/i/sticker.png) top center no-repeat; animation: spin 10s linear infinite; /*Set our animation play state to paused initially */ animation-play-state: paused;
}
.sticker:hover { /* Toggle our animation play state to running when we are hovering over our sticker */ animation-play-state: running;
}
@keyframes spin { 100% {transform: rotate(1turn); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<div class="wrap"> <div class="sticker"></div> <div class="msg">new!</div>
</div>
</body>
</html>

Playing a CSS animation on hover - Script Codes CSS Codes

body {padding:4em; background:#fcfcfc;}
.wrap {width:200px; margin:auto; z-index:1;}
.msg { color: whitesmoke; text-align:center; font-family: 'Bree Serif', Courier, monospaced; font-size:3.5em; width:200px; position:absolute; margin:55px 0 0 2px; pointer-events: none;
}
.sticker { width:200px; height:200px; position:absolute; background: url(https://dl.dropbox.com/u/1143870/i/sticker.png) top center no-repeat; animation: spin 10s linear infinite; /*Set our animation play state to paused initially */ animation-play-state: paused;
}
.sticker:hover { /* Toggle our animation play state to running when we are hovering over our sticker */ animation-play-state: running;
}
@keyframes spin { 100% {transform: rotate(1turn); }
}
Playing a CSS animation on hover - Script Codes
Playing a CSS animation on hover - Script Codes
Home Page Home
Developer Val Head
Username valhead
Uploaded August 03, 2022
Rating 4.5
Size 2,424 Kb
Views 40,480
Do you need developer help for Playing a CSS animation on hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Val Head (valhead) Script Codes
Name
Nav animation exercise - START
Net magazine demo - Complete
Spring physics with CSS variables
Adding Items
IOS Gmail loader-ish
Listening for CSS animation events
You are getting very sleepy...
Modal Relationship Examples
Neon glow letters
Steps Sprite Animation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!