Related
I'm trying to create an animation for a three-letter word. For now, take the word XYZ. The idea is that each letter of XYZ will move in a circular path of different radii and directions (Like one letter moving right, another left, and bottom) before coming back to the original position. I have tried using different forms of code for this but am failing because I don't clearly understand how to animate circular motion with a fixed origin. Will be helpful if anyone could share how to do this. I am also attaching part of my code
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter {
animation: move-letter 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter {
from {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>
It depends what you actually want, but you definitely need three different animations (i.e. with different settings), and 3 or more stages per animation, returning to the first position in each case:
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter.X {
animation: move-letter_x 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Y {
animation: move-letter_y 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Z {
animation: move-letter_z 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter_x {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
#keyframes move-letter_y {
0% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
50% {
-webkit-transform: rotate(0deg) translateX(80px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
#keyframes move-letter_z {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>
Most e-learning developers are familiar with the Storyline loader.
Here is the loader:
There's nothing wrong with the loader but I want to replace it with my own CSS loader animation!
Now I want to know how to add My Loader Animation CSS Code to Storyline's CSS Code.
In other words, I want to add My Loader Animation CSS to Storyline's CSS Code.
Here is My Loader Animation CSS Code:
<div class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-ellipsis"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div><style type="text/css">#keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
.lds-ellipsis {
position: relative;
}
.lds-ellipsis > div {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
}
.lds-ellipsis div > div {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f00;
position: absolute;
top: 100px;
left: 32px;
-webkit-animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
}
.lds-ellipsis div:nth-child(1) div {
-webkit-animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis div:nth-child(2) div {
-webkit-animation-delay: -5s;
animation-delay: -5s;
background: #499255;
}
.lds-ellipsis div:nth-child(3) div {
-webkit-animation-delay: -2.5s;
animation-delay: -2.5s;
background: #f2b736;
}
.lds-ellipsis div:nth-child(4) div {
-webkit-animation-delay: 0s;
animation-delay: 0s;
background: #c5523f;
}
.lds-ellipsis div:nth-child(5) div {
-webkit-animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis {
width: 200px !important;
height: 200px !important;
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
</style></div>
And here is the Storyline's CSS Code:
<style rel="stylesheet" data-noprefix>.slide-loader{position:absolute;pointer-events:none;left:50%;top:50%;width:500px;height:500px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);z-index:10000;background:transparent url("loader.gif") no-repeat center center}.mobile-chrome-warning{position:fixed;width:300px;height:75px;bottom:0px;background:rgba(0,0,0,0.0001);display:none;pointer-events:none;z-index:99}.mobile-chrome-warning-btn{position:absolute;left:-16px;top:-15px;width:107px;height:107px;background:rgba(0,0,0,0.6);border-radius:50%;border:1px solid rgba(255,255,255,0.2);pointer-events:all;-webkit-transform:scale(0.6)}.mobile-chrome-warning-btn svg{position:absolute;left:60%;top:58%;-webkit-transform:translate(-50%, -50%)}.mobile-chrome-warning-bubble{position:relative;color:white;padding:10px;background:rgba(0,0,0,0.8);border-radius:5px;float:left;margin-left:100px;margin-top:15px;pointer-events:none}.mobile-chrome-warning-bubble:before{position:absolute;top:8.5px;left:-20px;width:30px;height:30px;content:'';display:block;width:0;height:0;border-style:solid;border-width:12.5px 20px 12.5px 0;border-color:transparent rgba(0,0,0,0.8) transparent transparent;pointer-events:none}.is-mobile .swipe-resume-arrow{position:fixed;top:30%;left:50%;-webkit-transform:translate(-50%, 0);width:12%}.is-mobile .mobile-chrome-warning-text{position:fixed;top:56%;left:50%;-webkit-transform:translate(-50%, 0);height:30%;width:80%;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word;font-size:20px}.slide-loader .mobile-loader-dot{display:none}#-ms-keyframes spin{from{-ms-transform:translate(-50%, -50%) rotate(0deg)}to{-ms-transform:translate(-50%, -50%) rotate(360deg)}}#-moz-keyframes spin{from{-moz-transform:translate(-50%, -50%) rotate(0deg)}to{-moz-transform:translate(-50%, -50%) rotate(360deg)}}#-webkit-keyframes spin{from{-webkit-transform:translate(-50%, -50%) rotate(0deg)}to{-webkit-transform:translate(-50%, -50%) rotate(360deg)}}#keyframes spin{from{transform:translate(-50%, -50%) rotate(0deg)}to{transform:translate(-50%, -50%) rotate(360deg)}}body.is-mobile{background:black !important}body.is-theme-unified{background:#1b1a1a}.is-mobile .load-container,.is-theme-unified .load-container{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1;visibility:visible;-webkit-transition:visibility 250ms, opacity 250ms linear;-moz-transition:visibility 250ms, opacity 250ms linear;-mz-transition:visibility 250ms, opacity 250ms linear;transition:visibility 250ms, opacity 250ms linear;pointer-events:none}.is-mobile .hide-slide-loader .load-container,.is-theme-unified .hide-slide-loader .load-container{opacity:0;visibility:hidden}.is-mobile .slide-loader,.is-theme-unified .slide-loader{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;background:none;text-align:center;width:120px;height:80px;top:60%}.is-theme-unified .slide-loader{top:50%}.is-mobile .slide-loader .mobile-loader-dot,.is-theme-unified .slide-loader .mobile-loader-dot{width:30px;height:30px;background-color:white;border-radius:100%;display:inline-block;-webkit-animation:slide-loader 1s ease-in-out 0s infinite both;-moz-animation:slide-loader 1s ease-in-out 0s infinite both;-ms-animation:slide-loader 1s ease-in-out 0s infinite both;animation:slide-loader 1s ease-in-out 0s infinite both}.is-mobile .slide-loader .dot1,.is-theme-unified .slide-loader .dot1{-webkit-animation-delay:-0.2s;-moz-animation-delay:-0.2s;-ms-animation-delay:-0.2s;animation-delay:-0.2s}.is-mobile .slide-loader .dot2,.is-theme-unified .slide-loader .dot2{-webkit-animation-delay:-0.1s;-moz-animation-delay:-0.1s;-ms-animation-delay:-0.1s;animation-delay:-0.1s}#-ms-keyframes slide-loader{0%,80%,100%{-ms-transform:scale(0.6)}40%{-ms-transform:scale(0)}}#-moz-keyframes slide-loader{0%,80%,100%{-moz-transform:scale(0.6)}40%{-moz-transform:scale(0)}}#-webkit-keyframes slide-loader{0%,80%,100%{-webkit-transform:scale(0.6)}40%{-webkit-transform:scale(0)}}#keyframes slide-loader{0%,80%,100%{transform:scale(0.6)}40%{transform:scale(0)}}.mobile-load-title-overlay{display:none}.is-mobile .mobile-load-title-overlay,.is-touchable .mobile-load-title-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none}.is-mobile .mobile-load-title-overlay .mobile-load-title,.is-touchable .mobile-load-title-overlay .mobile-load-title{position:relative;height:30%;width:80%;margin:0 auto;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word}#media only screen and (min-width: 320px) and (orientation: landscape){.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(33%);-ms-transform:translateY(33%);-webkit-transform:translateY(33%);transform:translateY(33%)}}#media only screen and (min-width: 320px) and (orientation: portrait){.is-mobile .slide-loader,.is-touchable .slide-loader{top:55%}.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(35%);-ms-transform:translateY(35%);-webkit-transform:translateY(35%);transform:translateY(35%)}}
</style>
Every and any attempts to make it work was a complete failure for me.
Any advice is extremely appreciated.
It's great being able to change the animation. Here’s how for the HTML5 version.
I've done it with Storyline 360, and this method is reported to work in Storyline 3 too.
Publish your course and navigate to the folder that you published to.
Copy your chosen animation into this folder, making note of the filename. Optionally, place the animation within a subfolder.
Open the story_html5.html file in a text editor.
Relatively close to the top you will find:
url("data:image/svg+xml;base64
Delete data:image and the many lines following. You'll stop right before this part:
")
Now type the relative path and filename between the quotes you have left. So, now it looks like
url("folder/image.gif")
If your loader image is not exactly 100x100, then you will edit the width and height of your new animated image. If you look at the lines above where you just edited, you'll find the spot. The code looks like
width:100px;height:100px;
If your loader image is a spinning type, then you’re done. If it’s not a spinning type, you need to remove the sections of code that have “spin” in them, or your animation will also spin. Make sure you remove a whole section in between the semicolons, plus one semicolon. Don’t leave extra semicolons and don’t remove too many.
Source: Melissa Milloway’s tutorial
I didn't asked about transform origin. I asked why the animation doesn't work on mozilla
I'm stuck doing some animation svg on Mozilla. What I have tried in Chrome the animation worked perfectly fine, but when I tested on mozilla it's doesn't work well. I have put the vendor prefix, still the animation doesn't work properly.
I can't share the svg because the line of code to share here is limited, So please check it out from the demo.
Here is the DEMO
CSS
.trans-animate {
-webkit-transform: translate(-24%,9%);
transform: translate(-24%,9%);
-webkit-animation: wavedash 6s ease-out infinite;
animation: wavedash 6s ease-out infinite;
}
#-webkit-keyframes wavedash {
0% {
-webkit-transform: translate(-28%,9%);
transform: translate(-28%,9%);
}
50% {
-webkit-transform: translate(-42%,9%);
transform: translate(-42%,9%);
}
100% {
-webkit-transform: translate(-20%,9%);
transform: translate(-20%,9%);
}
}
.trans-animate2 {
-webkit-transform: translate(-38%,2%);
transform: translate(-38%,2%);
-webkit-animation: wavedash2 10s ease-out infinite;
animation: wavedash2 10s ease-out infinite;
}
#-webkit-keyframes wavedash2 {
0% {
-webkit-transform: translate(-28%,2%);
transform: translate(-28%,2%);
}
50% {
-webkit-transform: translate(-5%,2%);
transform: translate(-5%,2%);
}
100% {
-webkit-transform: translate(8%,2%);
transform: translate(8%,2%);
}
}
.dolphin-loca {
/*transform: translate(-166%,69%);*/
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
50% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
65% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
80% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
}
.text-dolphin {
-webkit-animation: dolphin-button 8s ease-out infinite;
animation: dolphin-button 8s ease-out infinite;
}
#-webkit-keyframes dolphin-button {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
50% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 0;
}
65% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
78% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
85% {
-webkit-transform: translate(-162%, -60%);
transform: translate(-162%, -60%);
opacity: 0;
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
}
.closeEye {
-webkit-animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
}
#-webkit-keyframes eye {
0% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
10% {
-webkit-transform: translateY(265px) scaleY(0.05);
transform: translateY(265px) scaleY(0.05);
}
15% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
25% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
30% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
35% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
40% {
-webkit-transform: translateY(255px) scaleY(0.1);
transform: translateY(255px) scaleY(0.1);
}
100% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
}
There are two reasons your animation doesn't work on Firefox.
The primary reason is that you have #-webkit-keyframes rules, which work in Chrome, but you have no #keyframes rules, which Firefox needs. You need to include both variants.
The second reason is related to the transform-origin difference between Firefox and Chrome.
Percentages in SVG files are relative to the viewport size (the dimensions of the SVG). That's what Firefox does. So translate(-172%,40%) is putting the dolphin way off the edge of the SVG.
Chrome is calculating percentages relative to the dimensions of the dolphin. That is not the correct behaviour.
If you want your animation to work in both browsers, you need to switch to using absolute pixel values in your transform rules (eg. 100px).
.dolphin-loca {
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
#keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
<svg x="0px" y="0px" width="1600px" height="450.39px" viewBox="0 0 1600 450.39">
<g id="Layer_7" class="dolphin-loca" >
<path id="XMLID_29_" fill="#0083B7" d="M805.419,255.439c0-44.307-28.647-75.028-71.876-79.144 c1.21-4.736,2.37-7.935-2.083-7.935c-3.665,0-8.222,3.306-11.537,7.72c-44.529,2.807-74.611,34.122-74.611,79.359 c0,12.658,2.772,23.054,7.724,31.504c-4.966,9.543-5.992,22.504-1.546,28.282c5.617,7.3,8.705-3.645,17.415-11.529 c15.167,10.519,32.232,14.748,56.46,14.748c2.102,0,4.185-0.033,6.248-0.098c-0.163,6.328-2.354,13.155-7.468,20.396 c-3.842-5.743-20.614-27.065-47.537-8.519c-1.583,1.09,17.322,28.912,44.758,12.288c-0.328,0.717-0.755,2.152,1.434,1.581 c-4.001,6.03-9.983,19.613,5.826,32.179c1.107,0.88,16.966-18.865-2.171-34.437c5.641-3.797,16.995-12.42,26.062-25.462 c13.228-2.205,20.431-6.272,29.324-12.662c8.699,7.883,11.786,18.811,17.4,11.515c4.446-5.778,3.42-18.739-1.546-28.282 C802.648,278.493,805.419,268.097,805.419,255.439z M725.366,314.436c-44.229,0-74.917-14.978-74.917-59.207 s30.688-74.401,74.917-74.401c44.229,0,74.917,30.172,74.917,74.401S769.595,314.436,725.366,314.436z" />
</g>
</svg>
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
My animation works quite nicely but it seems its slipping and doesn't seem to roll. What could be the problem?
FIDDLE HERE : http://jsfiddle.net/erkoda3m/2/
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(300px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(300px) rotate(360deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
The diameter is 150px, so circumference will be 150π = 471.24px. So if the rotation angle is 360°, translateX value will be circumference of the ball, or 471.24px :
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(471.24px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(471.24px) rotate(360deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
If you want to keep translateX constant and change rotate value, instead, you can calculate the angle by (400/471.24)*360 = 305.57deg
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(400px) rotate(305.57deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(400px) rotate(305.57deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">