I want to make an image do the following:
Start as a static image
Cycle through multiple frames when hovering
Return to the static image when no longer hovering
Image frames I was working with:
https://i.imgur.com/6z28Xcz.png
https://i.imgur.com/A0d4DL0.png
https://i.imgur.com/1QOJG9w.png
https://i.imgur.com/zwjr693.png
I tried this but could not get it to work (it just displayed nothing, even when copying and pasting the jsfiddle example linked to on that page).
Also is there a way of putting this in an img tag rather than a div one?
Pure CSS solution
#keyframes zigzag{
0%{
background-image: url('https://i.imgur.com/6z28Xcz.png');
}
25%{
background-image: url('https://i.imgur.com/A0d4DL0.png');
}
50%{
background-image: url('https://i.imgur.com/1QOJG9w.png');
}
100%{
background-image: url('https://i.imgur.com/zwjr693.png');
}
}
#logo{
width: 400px;
height: 170px;
border: 5px solid;
border-radius: 20%;
background-image: url('https://i.imgur.com/6z28Xcz.png');
background-repeat: no-repeat;
background-size: cover;
}
#logo:hover{
animation: zigzag 2000ms ease-in infinite;
}
<div id="logo"></div>
Related
for some reason are the image gone when the animation is finished? :/
.coin {
width: 200px;
height: 200px;
background-size: cover;
animation: CoinflipRoll 6s steps(199);
animation-delay: .5s;
animation-fill-mode: forwards;
background-repeat: no-repeat;
background-image: url("https://i.imgur.com/Mvek2Uy.png");
}
#keyframes CoinflipRoll {
100% {
background-position-y: -39800px;
}
}
<small>Image is 248x12648</small>
<div class="coin"></div>
Correct your code like below. You don't need a lot of complex value and you need to set the correct value to steps(). Your image contains 50 frames not 199
.coin {
width: 200px;
height: 200px;
animation: CoinflipRoll 2s steps(50) .5s forwards;
background-image: url("https://i.imgur.com/Mvek2Uy.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
#keyframes CoinflipRoll {
100% {
background-position: bottom;
}
}
<div class="coin"></div>
The animation is moving the picture out of the frame. Look at the picture - its still there afterwards, just moved through all the "animation frames". So stop it before it is at the end but manipulating the end value
my #keyframe CSS code seems alright. its not giving error yet its not showing at all on the browser.
the classname on html is img1.
my #keyframe CSS code seems alright. its not giving error yet its not showing at all on the browser.
the classname on html is img1.
somebody help
.img1 {
width: 150px;
animation-name: pics;
animation-duration: 25s;
animation-iteration-count: 1;
background-image: url("assets/pic1.png");
background-repeat: no-repeat;
background-size: 100%;
margin-top: 19px;
margin-bottom: 19px;
}
#keyframes pics {
0% {
background-image: url("assets/pic8.jpg");
}
12.5% {
background-image: url("assets/pic1.png");
}
25% {
background-image: url("assets/pic2.png");
}
37.5% {
background-image: url("assets/pic3.jpg");
}
50% {
background-image: url("assets/pic4.jpg");
}
62.5% {
background-image: url("assets/pic5.jpg");
}
75% {
background-image: url("assets/pic6.jpg");
}
87.5% {
background-image: url("assets/pic7.jpg");
}
100% {
background-image: url("assets/pic8.jpg");
}
}
Your animation is working, but as #Yudiz says you need to set a height to your .img1 element.
background-image property is setting a background image to your element, but il will not change his size depending of your background-image size. Right now, your .img1 element is 150px large, and 0px tall, so it's invisible.
trying to follow the blog post treehouse tutorial and coded everything pretty much like the tutorial said but my animation wont start or work. My little image shows up fine and its a 490 x 110 sprite sheet. The code im using is the following:
.ken {
width: 70px;
height: 110px;
background: url('/imgs/ken-shoryuken.png') left center;
animation: play 1.5s steps(7) infinite;
}
#keyframes play {
100% { background-position:-490; }
}
And it is positioned by a simple dive which is showing up fine, its just the animation wont work for some reason, any thoughts?
You need to specify an absolute length unit, keyword or percentage for background-position:
#keyframes play {
100% { background-position:-490px; }
}
[Background position] Syntax
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;
I have a background which exists of 3 images in total. However the middle background image (wrapper2) is visually 'between' two background images (wrapper1 and wrapper2).
When I try to rotate that middle image (wrapper2), the top-most image (wrapper3) also moves.
How can I prevent this, so that only the middle background-image (wrapper2) can rotate and not also the other one (wrapper3)?
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<!-- blabla -->
</div>
</div>
</div>
#wrapper1 {
background-image: url("../media/bg1.png");
background-size: 300px 200px;
background-repeat: no-repeat;
}
#wrapper2 {
background-image: url("../media/bg2.png");
background-size: 300px 200px;
background-repeat: no-repeat;
}
#wrapper3 {
background-image: url("../media/bg3.png");
background-size: 300px 200px;
background-repeat: no-repeat;
}
#wrapper2:hover
{
animation: TestAnim;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#keyframes TestAnim
{
0% { transform:rotate(0deg); }
25% { transform:rotate(-4deg); }
100% { transform:rotate(0deg); }
}
}
ok, wasn't possible the way I worked.
I could either position the divs (absolute/relative) and make them siblings instead of childs.
But i've choosen to create a sprite image of all the rotations that I wanted and using an css3 animation.
In the CSS keyframes animation I move the background position every time:
0% { background-position: 0 0; width: 300px; height: 200px; }
1% { background-position: 0 -200px; width: 300px; height: 200px; }
...
Important is that you have to define the step-start!
animation-timing-function: step-start;
This step-start works fine in Internet Explorer 10.
Remark: For older browsers, the animation will not work (CSS3 is not known or step-start is not known) and your first sprite will be displayed, so make sure your first sprite is your initial state.
For your information: I used The GIMP to create my animation and used a plugin called CSS WebSprites to automatically generate my sprites and CSS code:
The GIMP CSS WebSprites plugin
I want a background image to exapand and then contract on hover.
a:hover{
background-size: 80%;
}
a:hover{
background-size: 85%;
transition: background-size 0.05s ease;
//This is where I want the size to shrink back to it's original size.
}
I know there is a delay-property, but is it possible to add multiple transitions with different delays etc?
One solution I came up with is to add an additional property
a.workaround:hover{
background-size: 80%;
transition-delay: 0.05s;
}
However this seems like a fairly messy solution. For example it doesn't support loops and it scales poorly.
You could instead define a CSS-Animation
See this jsFiddle for a demo: http://jsfiddle.net/qDppZ/
(Only -moz for clearness)
Code:
a {
display: inline-block;
background: url(http://openclipart.org/image/800px/svg_to_png/95329/green_button.png) no-repeat;
background-size: 80%;
width: 100px;
height: 60px;
}
a:hover {
-moz-animation: anim 0.2s; /* Firefox */
}
#-moz-keyframes anim /* Firefox */
{
0% { background-size: 80%;}
50% { background-size: 85%;}
100% { background-size: 80%;}
}