I have a sprite made of 25 frames for a total width of 3427px and a css code like:
http://codepen.io/AlexanderWeb00/pen/aBKVaR
.test {
width: 138px;
height: 224px;
background: url(/img/flame.png) no-repeat;
animation: flame 2s steps(25) infinite;
animation-delay: .5s;
}
#keyframes flame {
100% {
background-position: -3427px 0;
}
}
each frame including 1px space on each side makes its width 138px.
It is it the case that I should add more frames or is there anything that cab be added with CSS?
Related
I have a spritesheet with a dice in it; 6 faces.
its face is 70 x 70 pixels
total sprite image is 70 x 420 pixels
now I want to make a CSS animation that goes from 1 to 6 (that's simple)
additionally I want to change the size; at 50% double it size and at 100% back to normal.
:local(.mydice)
{
width: 70px;
height: 70px;
background: url('/images/dices.png');
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 100% 600%;
animation: dicemove1 5s steps(6, end) infinite;
}
and then use keyframes to make the alterations:
#keyframes dicemove1
{
0% { background-position: 0px 0px;}
100% { background-position: 0px -420px; }
}
the above CSS snippet works.
but now adding the code to make it grows fails:
50% { width: 140px; height: 140px; margin-top: -35px; margin-left: -35px; background-position: 0px ???? }
I know background-position must be changed to support the bigger size but problem is I use steps because I don't want to scroll through the image but see it change from face to face (1,2,3,4,5,6)
dividing 100 by 6 doesn't result in a nice round integer which makes the 50% alteration a bit difficult.
Have been looking for keyframes that could handle steps as well but have not found such a thing.
Anyone knows a way to do this?
I found the solution.
transform: scale(2,2);
This will grow the dice.
Now I can use 2 animations simultaneously; 1 changing the face other resizing
animation: anim1 1s steps(6, end) infinite, anim2 1s steps(36, end) infinite;
#keyframes anim1
{
0% { background-position: 0px 0px; }
100% { background-position: 0px -600px; }
}
#keyframes anim2
{
50% { transform: scale(2,2); }
}
If I have two lines of text one on top of the other. Content of each line is dynamic.
Is there a way to set animation speed in pixels per second? So that line would scroll with same speed regardless of their length?
Example of the situation:
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>
Means of AngularJS directive and CSS are welcome.
You can use JQuery (javascript) to get the width of headings and than calculate the duration based on the width i.e duration per pixel
width() method of jquery is used to get width of the headings.
I calculate the the duration as follows:
1s = 20px
Therefore 100px = 100/20
= 5s
You can increase the denominator (see the number10) in var dur1=Math.ceil(w1/10) to speed up the scrolling.
Here is the code
//getting the width of both the headings
var w1=$("#line1>h4").width();
var w2=$("#line2>h4").width();
//calculating the duration of the animation dynamically based on the width
var dur1=Math.ceil(w1/10);
var dur2=Math.ceil(w2/10);
//setting the duration dynamically
$("#line1>h4").css("animation-duration",dur1+"s");
$("#line2>h4").css("animation-duration",dur2+"s");
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>
In CSS you must provide the animation duration in time units, which is currently seconds / miliseconds.
You could, however, adapt the width of the transition by switching from a %-value to px-values like shown below:
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-1000px);
/* Firefox bug fix */
-webkit-transform: translateX(-1000px);
/* Firefox bug fix */
transform: translateX(-1000px);
}
}
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>
The following image is to be used in a keyframes animation by moving the background-image position 100% to the right on each frame:
The idea is that the ArrowsAnim.png has 7 frames of the same image (the set of 3 chevrons pointing to the right) in different animation states. The animation arrowAnimation (CSS below) simply skips through background-position 0% to 300% to show the first three frames of this image over 0.5 seconds, repeatedly.
What's happening is that when I resize the browser window, I can sometimes see some pixels of the next or previous frame of the animation, instead of having the background perfectly centered around whichever should be the current block, as you can see in the next picture:
So for some reason, background-position is not being calculated correctly.
I also cannot reproduce this issue on Chromium, but I can do so on Chrome, Firefox and Edge.
CSS:
#autoplay-arrow {
display: inline-block;
position: absolute;
width: 5.91549%;
top: 22.05882%;
height: 50.74627%;
margin-left: 18.30986%;
background-size: 100% 100%;
background-position: 0 0;
background-image: url(../graphics/Arrows_002.png);
}
#-moz-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#-webkit-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#autoplay-arrow.anim {
background-image: url(../graphics/ArrowsAnim.png);
background-size: 700% 100%;
-moz-animation: arrowAnimation 0.5s steps(3) infinite;
-webkit-animation: arrowAnimation 0.5s steps(3) infinite;
animation: arrowAnimation 0.5s steps(3) infinite;
}
I can't seem to get the animation timing right on this
http://codepen.io/anon/pen/ZYMgqE
.spinner {
width: 36px;
height: 36px;
background: url('http://i.imgur.com/CYiaWsF.png') top center;
animation: play 1s steps(10) infinite;
}
#keyframes play {
100% { background-position: 0px -2844px; }
}
I have tried numerous combinations, but it always comes out looking like a film reel.
Am I doing something wrong? Did I misunderstand CSS sprite animations?
Your math is off..I think.
The image is, apparently, 2844 px tall...so the number of steps should be the height divided by the element height
2844 / 36 = 79
.spinner {
width: 36px;
height: 36px;
background: url('http://i.imgur.com/CYiaWsF.png') top center;
-webkit-animation: play 1s steps(79) infinite;
animation: play 1s steps(79) infinite;
}
#-webkit-keyframes play {
100% {
background-position: 0px -2844px;
}
}
#keyframes play {
100% {
background-position: 0px -2844px;
}
}
<div class="spinner"></div>
Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see http://css-tricks.com/color-animate-any-shape-2)
#-webkit-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
#-moz-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
Now, there are two other divs that have a white background. On hover I want those white divs to have an animated background color as well that is in sync with the permanent color animation. I am aware that a native sync isn’t supported (see How To Sync CSS Animations Across Multiple Elements?).
My first approach would be to have three divs that all have animated background colors and cover two of them with white divs, positioned relative. On hover those white divs would then turn transparent and reveal the divs with the animated background (see http://jsfiddle.net/Vzq4B)
#permanent {
height: 100px;
margin-bottom: 15px;
width: 100%;
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
}
#hover {
position: relative;
top: -115px;
margin-bottom: -100px;
height: 100px;
width: 100%;
background: #fff;
}
#hover:hover {
background-color: transparent;
}
However, this approach will only work if I know the height of my elements, which I don’t since the content is variable.
Which other ways are there to achieve this effect for divs of unknown height?
Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.
HTML:
<div id="container">
<div id="child">Your content.</div>
</div>
CSS:
#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}
Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/
Why don't you try this:
#hover:hover {
height: auto;
width: 100%;
outline: 1px solid #999; /* only style */
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
cursor: pointer;
}
There is a link: http://jsfiddle.net/nmL9s/
Thanks...