- From: Brian Manthos <brianman@microsoft.com>
- Date: Tue, 26 Jun 2012 21:37:30 +0000
- To: Tab Atkins Jr. <jackalmage@gmail.com>, fantasai <fantasai.lists@inkedblade.net>
- CC: Florian Rivoal <florianr@opera.com>, "www-style@w3.org" <www-style@w3.org>
Tab Atkins:
> The only use-case I've ever seen for background-position-x/y is image spriting
Another use-case is animating along one axis.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<title>KITT1</title>
<style>
html {
background-color: black;
color: yellow;
}
.stockphoto {
width: 300px;
height: 240px;
background-image: url("http://ts2.mm.bing.net/th?id=I4652627029067941&pid=1.5");
border: 1px solid white;
}
.pulseblack {
width: 64px;
height: 14px;
background-color: black;
border-radius: 40%;
position: relative;
left: 122px;
top: 103px;
}
@keyframes KITT {
from { background-position-x: -30px; }
to { background-position-x: 30px; }
}
.pulsered {
background-image: linear-gradient(to right, transparent, red 50%, transparent);
background-image: radial-gradient(red, transparent 75%);
width: 100%;
height: 100%;
background-position: 0px 4px;
background-repeat: no-repeat;
background-size: 100% 5px;
animation-name: KITT;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-duration: 1s;
}
</style>
<head>
<body>
<div class="stockphoto">
<div class="pulseblack">
<div class="pulsered">
</div>
</div>
</div>
</body>
</html>
Received on Tuesday, 26 June 2012 21:38:25 UTC