<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sprite animation with svg</title>
<script data-require="jquery@1.12.4" data-semver="1.12.4" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body onload="init()">
<div id="svgcontainer">
<div id="player" class="run"></div>
</div>
<button onclick="jump(event)">click me</button>
<!--<div class="demo" style="height:200px;"> </div>-->
<div class="demo2" style="height:200px;"></div>
<img src="roterkreis.svg" id="kreisimg"/>
</body>
</html>
body,
html {
width: 100%;
height: 30px;
background-color: #d2d2d2;
padding: 0px;
margin: 0px;
}
#controll {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: 9;
color: white;
font-weight: 900;
line-height: 100px;
}
#left {
width: 50%;
height: 100%;
float: left;
background: rgba(255, 255, 255, 0);
}
#right {
width: 50%;
height: 100%;
float: right;
background: rgba(255, 255, 255, 0);
}
#player {
position: absolute;
bottom: 5px;
left: 30%;
margin: auto auto;
width: 125px;
height: 125px;
-webkit-transform: translateZ(0);
background-image: url(http://i.imgur.com/VTyo70d.png);
z-index: 2;
}
.run {
-moz-animation: player_run 0.7s infinite steps(12), linear;
-webkit-animation: player_run 0.7s infinite steps(12), linear;
}
.jump {
-moz-animation: player_jump 0.5s steps(11), linear;
-webkit-animation: player_jump 0.5s steps(11), linear;
}
.roll {
-moz-animation: player_roll 0.6s steps(12), linear;
-webkit-animation: player_roll 0.6s steps(12), linear;
}
@-moz-keyframes player_run {
0% {
background-position: 0px 0px;
}
100% {
background-position: -1500px 0px;
}
}
@-webkit-keyframes player_run {
0% {
background-position: 0px 0px;
}
100% {
background-position: -1500px 0px;
}
}
@-moz-keyframes player_jump {
0% {
background-position: 0px -250px;
}
100% {
background-position: -1375px -250px;
}
}
@-webkit-keyframes player_jump {
0% {
background-position: -0px -250px;
}
100% {
background-position: -1375px -250px;
}
}
@-moz-keyframes player_roll {
0% {
background-position: 0px -125px;
}
100% {
background-position: -1500px -125px;
}
}
@-webkit-keyframes player_roll {
0% {
background-position: 0px -125px;
}
100% {
background-position: -1500px -125px;
}
}
#player2 {
position: absolute;
bottom: 5px;
left: 50%;
margin: auto auto;
width: 125px;
height: 125px;
-webkit-transform: translateZ(0);
background-image: url(http://i.imgur.com/VTyo70d.png);
z-index: 2;
}
.wilku {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/possessed.svg) 0 0 repeat-x;
height: 110px;
width: 180px;
position: absolute;
bottom: -30px;
left: 90%;
margin-left: -100px;
font: normal 16px/normal"Times New Roman", Times, serif;
color: rgba(0, 0, 0, 0.9);
-o-text-overflow: clip;
text-overflow: clip;
-webkit-transform: rotateX(-1deg) rotateY(-180deg);
transform: rotateX(-1deg) rotateY(-180deg);
z-index: 1;
}
@keyframes translate {
0% {
transform: translateX(-200px);
}
100% {
transform: translateX(2000px);
}
}
.foreground,
.midground,
.background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
translate3d(0, 0, 0);
background-position: 0 100%;
}
.foreground {
animation: parallax_fg linear 10s infinite both;
background: url(https://dl.dropbox.com/u/5039313/fg-grasses.png) 0 110% repeat-x;
z-index: 5;
}
@keyframes parallax_fg {
0% {
background-position: 0px 100%;
}
100% {
background-position: -3584px 100%;
}
}
.midground {
animation: parallax_mg linear 20s infinite;
background: url(https://dl.dropbox.com/u/5039313/mg-grasses.png) 0 100% repeat-x;
z-index: 3;
}
@keyframes parallax_mg {
0% {
background-position: 0px 100%;
}
100% {
background-position: -3000px 100%;
}
}
.background {
background-image: url(https://dl.dropbox.com/u/5039313/bg-3000.png), url(https://dl.dropbox.com/u/5039313/bg-2000.png);
background-repeat: repeat-x;
background-position: 0 100%;
z-index: 1;
animation: parallax_bg linear 40s infinite;
}
@keyframes parallax_bg {
0% {
background-position: 0px 100%;
}
100% {
background-position: -3000px 100%, -2000px 100%, -1800px 100%, -1600px 100%, -1200px 100%;
}
}
.muybridge {
animation: walk-cycle .5s steps(10) infinite;
background: url(https://dl.dropbox.com/u/5039313/horse-muybridge4.png) 0 0 repeat-x;
height: 110px;
width: 180px;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -100px;
translate3d(0, 0, 0);
/* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
z-index: 1;
}
.muybridge2 {
animation: walk-cycle .7s steps(10) infinite;
background: url(https://dl.dropbox.com/u/5039313/horse-muybridge4.png) 0 0 repeat-x;
height: 110px;
width: 180px;
translate3d(0, 0, 0);
z-index: 4;
}
.horse-position {
animation: catchup 60s ease-in-out infinite;
position: absolute;
bottom: 8px;
left: 50%;
margin-left: -300px;
z-index: 4;
}
/* Sprint, then slow */
@keyframes catchup {
0% {
left: 10%
}
10% {
left: 85%
}
100% {
left: 10%
}
}
/* step through frames horizontally */
@keyframes walk-cycle {
0% {
background-position: -12px -10px;
}
100% {
background-position: -1950px -10px;
}
}
.demo {
background: url(wilku.svg) 0 0 repeat-x;
}
.demo2 {
background: url(roterkreis.svg) 0 0 repeat-x;
}
not so (a) pure CSS animation with
(b) sprite animation with svg plus
(c) svg animation with smil
so in short there is nothings pure here in any way what-so-ever and in fact you have here a mash-up of several compositions and quite randomly found techniques
---
in greater detail this experiment combines number of techniques and bits of script i encountered researching svg graphics and animation.
to be even more specific:
(a) is [Muybridge horserace ](http://codepen.io/shawnmcburnie/pen/HJpEI/) by [ Shawn McBurnie](http://codepen.io/shawnmcburnie)
>Pure CSS animation. Classic Muybridge images used for horse gallop cycle; layering/parallax directly inspired by Rachel Nabors' cat Tuna;
which itself is a clone of someone elses code ... i don't know ... i guess i'm done with referencing here;
(b) which was a starting point of this exploration originated from [markusT](https://github.com/inkfood) a.k.a. [inkfood](http://www.inkfood.com/) and the original source code could be found on
https://github.com/inkfood/dump_2014/tree/master/sriteAnimationDemo
hacked together in a trully zombie manner by [](http://codepen.io/rafszul/) with added for the hell of it my own
(c) [Look Ma, no CSS nor JS!!!](http://codepen.io/rafszul/details/bNERPL/) which boasted
> SVG animation with SMIL - no css, no js, 100% pure 206 lines of xml
and which at some point will become the player sprite
var player;
function init(event)
{
player = document.getElementById("player");
}
function jump(event)
{
player.className = "jump";
player.addEventListener( "webkitAnimationEnd", run, false );
player.addEventListener( "animationend", run, false );
}
function roll(event)
{
player.className = "roll";
player.addEventListener( "webkitAnimationEnd", run, false );
player.addEventListener( "animationend",run, false );
}
function run(event)
{
player.className = "run";
player.removeEventListener( "webkitAnimationEnd", run, false );
player.removeEventListener( "animationend", run, false );
}
$(function(){
console.log($('svg'));
var stuff = $($('img:first').context).find('html');
console.log(stuff);
});
<svg viewBox="0 0 432 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://rafszul.github.io/" target="_blank">
<path stroke-width="8" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="250" fill="white" stroke="maroon" d="M328.8 84.5l10-16.3 17.6 5 41.2 1.2 29.5-15L399 47l-46-1-19.7-4.4-6.5-5.7-7.8-11-20.3-10-32.3-2-15.2 6-52.7-6-.7 1-16.8 1 1.5-10L127 19l-1.6 6L99 40l4.8 6 10.7 2.4-.2 12 5.7-4 23.3-1-.3.7 11.4 14 3.8 5-2 15h-.6.5l-5 40 29 15 8-5-2-7-16-6 14-15 19 16 12 8 21 3 13-8-11-5-13 2.7-10-9-13-20 46-25 23 32.7h-3l40 19.4 2 16-24.2 5 43 1-7-36-13-8.2-4-11 17 3.5 26 8 30 19 8-5-14.5-14-23-15-16-4z">
<animate attributeName="d" begin="0s" dur="2s" repeatCount="indefinite" values="M329.8 84.5l10-16.3 17.6 5 41.2 1.2 29.5-15L400 47l-46-1-19.7-4.4-6.5-5.7-7.8-11-20.3-10-32.3-2-15.2 6-52.7-6-.7 1-16.8 1 1.5-10L128 19l-1.6 6L100 40l4.8 6 10.7 2.4-.2 12 5.7-4 23.3-1-.3.7 11.4 14 3.8 5-2 15h-.6.5l-5 40 29 15 8-5-2-7-16-6 14-15 19 16 12 8 21 3 13-8-11-5-13 2.7-10-9-13-20 46-25 23 32.7h-3l40 19.4 2 16-24.2 5 43 1-7-36-13-8.2-4-11 17 3.5 26 8 30 19 8-5-14.5-14-23-15-16-4z; M148.2 112.8l-24.5-6.8-9.8 3 16 9 2 13.3-18-3.8-15-23.2 5-7L86 83h-.4l-7.8-12-16.6.6L49.6 78 53 62.2l-12.8 2-7.2-10L55.8 42l8.4-10.5 43.3-7 5 6 24.7 1.5v.2l21.2 3.8 53 .4 25.6-2 26 3.3 15.6 6.3 13.3 8 67 4.3 26 22-1-.2-18 3-29 4-26-2-1 29 18 21 6 29-29 1 17-11-8-12-35-24-3 18.8-8 16-29 15.6-14-.3 6-11 23-11 9-21-2 1.7-40-32-4-1-49.6 20-.7 9.4h10l8 4 2 6.6-12 2.7-20-7-8-13z; M381 71.2l3-1.2v.6l-38-12.3-36-2.4-36.3-17-7.7-3-1-1-4.3-2v1l-5.7-1-17-3-1.4-1-34-1-43.3-1-31-6h.2L93 17l8-6-52.2 14-2 7-22 14.2 5.3 7.5L40 58l-2 11 8.2-6 24-1.7L82 79l.6-.3L94.4 91l20 7 11.2 10.2 5.8-4.3 3.2 1 8.4-1 5.7 8 15.7 1 9.4-5-4-7-2.2-1 15.7-2L210 85l13.8 4.3 21 3.3 67.3 1-5-10.5 13 11 49 13 26 26h14l-4-12-29-30-12-3-4-5 26 6 25 10 9-3-7-10.4-15-2-16-9.4z; M308 63.7l54 1.3 9-12-16-10h-1l-36.3-4.2-18.6-10-43-9.3 1 .6-14-4-23-3h1l-68 8-11-4h-17l-29-5 2-6-52 12-9 12-22 14 5 8 11 2-3 11.7 8.7-3 21-5 10 9H69l10.4 6-1 1L46 83l-31 23.4 3 8.2 17.7-4.2 6-4.7 9 9 8.2 1.5 2-14 6-4 33-1.3 32-5 40-5h4l24-16 20 4 23-4 23 15 4 2 23 5 15-2 29 3.2 42 9 3-15.6-30-4.3-12-10-22-2-12-10z; M285 42l19.3 2 32.7-3 25-9-.3.3-30.2-14.6-28-2.8-46-7v1l-20.2-2L221 4l-34 4-39.5 8-43-1.8-13.3-3L88.4 5 41 19 24.6 32l-21 11.4L11 53l18.4.4-10.2 5.8 7.5 7 24-8.6 5.3 7.2-35.8 6L0 86l4.3 8.7L23 90l25.4-8.6L70 83 56.6 95.3 23 109.5l-19.3 4.7-1 7.8 15.6 5.8 22.3-5.3 56.3-22 15-8.5 2 1 39-2.2 28-21 19-7 7 7 19-5.3 55 16h-1l20-4.5 33 14 16-1.7-1-7.7-11-2.8-1-4 23 5.2h10l-1-10-26-6-21-11.4-27-.6-6-2.8-4-6.3z; M286.6 51l-6.3-9 55.7 4 24-1.2 6-9.6h.2l-36-15.3-29.5-7-48.2 3-31.8-5-51.5 11-40 4-17 1H91.7l.5-8-49.6 16-5.2 11L14 63l5 8h12l-6 10-17.2 1-5 6.3 21 9.2 46-6.4L98 90l8.5 4.7 1 2.5-16.3 15-14.8 20.2L52.7 144l35.8 1 18.3-21.3 25.4-11.8 1.4-3h.2l26.6-10L201 71l11 7.3 20.4-6L248.2 85l16.6-11.8 33 5.2 9-4.2 21 9.6 13 .8 4-6.8-5.8-6.4 27 9.6 13-4.7-2.5-8.3-30.5-6-24-15.6-21.7.6-13.7 4z; M286 53.3l-3.6-7.2 25 1h47l16.3-11-27.4-14-35.3-8-51 7-23.8-4-26.2 4-43 15-61 6-4.5 1-8-6-39.7 19-8.4 12L23 78l7.5 9.5 8.7-1.2L35 99l5 3.3-26-.3 4 11.3 29 4.7 44.6-11.2 27.2 9.4-15.4 18.4-22 11.2 40-.6 5.3-7.6 15-18 3.7-3.8 19.4-4 31.3-20 17-13 13 6.2 16-5.3 17-1 4 3.8 39-.3 18 9.4 16 6.4 3-7.5-5-9-12-2.5v-6.4l19 5.4 32 12.7 5-10.3-12-6.7-11-3.2-20-17.7-38 1-9-.5zM46.7 100.7l19.4-9 3 3-22 6z; M274.8 59l-2.5-23.6 39.7 8.4 30-5 17.4-9.5V29l-30-13.4-36.8-10L251.4 8l-27-3.6-26 8.2-40 21.7-21.6-.3-29 4-4-6.7h.2L62.7 45l-3.4 10-31.7 19 8.3 9 9 .3-2 11.4 8 4.6L76 88l7.3 10 1.2-.3 19 13.5-29 32.5-23 8.2-7.7 9h40l18.6-20 43.6-26 4.3 3 8.7 28-9.5 14h25l3.5-11-4-23 19-37 19-21 15.2 11 1.3 1 8 5 1-1 4.5 3h-.5H264l14.2 12 16 6 6.4-3.5-1.6-10-21-8.3-1-4.5 16-4 30 16 14-2.8-6-14.6-17-.5-20-17-19.4 3z; M268.2 53l-3-22.7 8.4-2.2 4.2 3 38.5 16 16.7-1 15 2h.3l-34.5-38-32.4-6-34.7 1L232 1 219.6.4 192.3 6l-18.8 17L153 33.2l-33 2-5-9.4h1.2L68.8 47.2 64.6 60l-24 12 9 9.3 13-2-7.4 10 4.7 7 25-11 20 17.5v-.4l10 8h-1l17 18-25 32.4 32-1.3 12-32.5 16-17 18 10.6 29 32-8 11.2 23-2.4-3-17.2-22-22.2-9-20.7-4-9 3-1.8L207 71l8 10 24 2.8.5-.4 1.3.5h-.4l16 28 9.3 7 11-2 2-10-9.8-9-1-18 18 4 8 19 16 7 7-10-17-12-10-28-23-9z; M267 75l8-11.6 2.2-22.5 46 1 26.5 1h9.7l-12-20-37-14-50.8 2L238 6h-.3L216 7l-15 7.5-19 19-26 7.4-24-1-2.3-8v-1L83.2 49l-4.8 14-23.2 14 5.6 5.7 13 6-3.4 11 9.2 2 25.8-12 4.4 17 31.2 12 1-1 9.2 3.8h-.3l2 .7 24 9.7 8 21-7 10 19-3v-11l-8-36v-1l31 11h1l-3 13 8 9 6-14 1-1.8 8 5v.2l4 11 6 1 5-13 13-3 3-7-11-5 1-4 10-24-8-18.7zm-17.4 50.2l-4 1-4-3 4.2-7.4 2.7-9.2 7.6 6-6 12.6zm-34.4-29.7h-.2l13.5 17.6 1 1 1-1 9-9v1l-24.3-8z; M242 95.7l-3 8.4 3 5 4-9-4-4zM269.4 83l9.5-12.4 6-20.3 41 1 45-12-7-13.3-44-10.4-29 5-11-.2-24-7-24-2-17 1.7v1l-25 21-5 8-37 6-1 1-3-1-6-9v-1L94 58l-4 12-25.7 13 7.4 8L84 92.8l-6.4 8 5.6 5.3L122 96l1 9.4 22.2 15.5 2-1 19.8 7h-.8l1.8-1h1.7l3.2-2 11-3 15 7v.7h-1l-9 10-1 10 9 2.5 11-11.5 13 13.6-2 7.3 19-2-8-15.8 3-7 13-11.6 20-4 8-15.5-13 3 3-12 3-17.7zM209 110.4l-3.8.7 11.2 11 5.3-3h-.8l-12-8z; M249 104.4l-10-7-.5 2.6 9.8 15 2.4-1.3-1.8-9.3zm30-8.8l17 1.4 26-28 5.6 6.3 40.8 2.2 29.7-16 23-19-44-1-21 5.8-32-3L313 33l-31-16.4-44 5-20.8 18.8-8 .3-36.3-1.5-4-8.4L119 48l-4 8.8-30.7 16.6L96 86.7l11-2.5-6.2 10.4 6 5.2 39-2 12.3 7 32 19 3-.2v.2l4-.4 15-.7 7-3 6-2 8 8.4-10.2 7 8.4 6-16 7-3 8 17.5 2 23-13 37.3 15 9-7-9.5-5-11.5-5 5-15-6-1 5-28z; M312.4 91h.7l15-12 27-11.7 47 12.2 30-28.8-36-.5-57-7.5-7-14.2-20-17.2-29-5-7 .5-31 10-39-1.6V15l-19-1.6-2-8.4 1 .3L136 17l-9.6 8.6-26.7 13.7 5 7.6 10.8 2-3 11 8.5-3 23.2-2h.6-.8l14.6 19 33.7 23 9-3 9.3 22 9.7 4h-.3.5l16.5 7 17.7-9 16.3 2 17-6 .4-9 7 9-3 17-21 15 23.5-1 8-8 7-16.4 2-32.7zm-24 15.8l-16.2 3 12.3-8.2 4 5.2zm-38.2-33.6L240.6 84l-1.4.4L252 103l2 1 .3-.3 6.5-16v.4l-10.6-14zm0 0l.2-.2zm-26 27.6l-3.6 9 18 2.8-14.5-11.8z" />
</path>
</a>
</svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="roter kreis.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="395.22743"
inkscape:cy="930.03396"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1138"
inkscape:window-x="1192"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<circle
cx="114.97169"
cy="28.068193"
r="24.946428"
style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" >
<animate attributeName="stroke" from="black" to="red" id="kreis" begin="kreis.click" dur="3s" />
<animate attributeName="fill" from="red" to="yellow" id="kreis2" begin="kreis2.click" dur="1s" />
</circle>
</g>
</svg>