diff --git a/lib/encoder.ex b/lib/encoder.ex
index 3c3f161..7625629 100644
--- a/lib/encoder.ex
+++ b/lib/encoder.ex
@@ -108,18 +108,28 @@ defmodule MfmParser.Encoder do
         %Node.MFM.Spin{} ->
           {html_child, styles_child} = to_html_styles(node.children)
 
-          stylemap = %{
-            "mfm-spin" =>
-              "@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}",
-            "mfm-spinX" =>
+          styles_map = %{
+            "x" =>
               "@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}",
-            "mfm-spinY" =>
-              "@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}"
+            "y" =>
+              "@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}",
+            "z" =>
+              "@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}"
+          }
+
+          keyframe_names_map = %{
+            "x" => "mfm-spinX",
+            "y" => "mfm-spinY",
+            "z" => "mfm-spin"
+          }
+
+          directions_map = %{
+            "left" => "reverse"
           }
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite #{node.props.direction} none running #{node.props.keyframes_name};\">#{html_child}</span>",
-           styles ++ [Map.get(stylemap, node.props.keyframes_name, "")] ++ styles_child}
+             "<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite #{Map.get(directions_map, node.props.direction, node.props.direction)} none running #{Map.get(keyframe_names_map, node.props.axis, "")};\">#{html_child}</span>",
+           styles ++ [Map.get(styles_map, node.props.axis, "")] ++ styles_child}
 
         %Node.MFM.Shake{} ->
           {html_child, styles_child} = to_html_styles(node.children)
diff --git a/lib/node/mfm/spin.ex b/lib/node/mfm/spin.ex
index efb40fd..006a52a 100644
--- a/lib/node/mfm/spin.ex
+++ b/lib/node/mfm/spin.ex
@@ -1,13 +1,3 @@
 defmodule MfmParser.Node.MFM.Spin do
-  # keyframes_name:
-  # x -> mfm-spinX
-  # y -> mfm-spinY
-  # _ -> mfm-spin
-  #
-  # direction:
-  # left -> reverse
-  # alternate -> alternate
-  # _ -> normal
-  #
-  defstruct props: %{keyframes_name: "mfm-spin", direction: "normal", speed: "1.5s"}, children: []
+  defstruct props: %{axis: "z", direction: "normal", speed: "1.5s"}, children: []
 end
diff --git a/test/encoder_test.exs b/test/encoder_test.exs
index 988ff9b..64102b3 100644
--- a/test/encoder_test.exs
+++ b/test/encoder_test.exs
@@ -149,107 +149,107 @@ defmodule MfmParser.EncoderTest do
     end
 
     test "it handles spin" do
-      input_tree_spin_reverse = [
+      input_tree_z_left = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spin", direction: "reverse", speed: "1.5s"},
+          props: %{axis: "z", direction: "left", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spinx_reverse = [
+      input_tree_x_left = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spinX", direction: "reverse", speed: "1.5s"},
+          props: %{axis: "x", direction: "left", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spiny_reverse = [
+      input_tree_y_left = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spinY", direction: "reverse", speed: "1.5s"},
+          props: %{axis: "y", direction: "left", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spin_alternate = [
+      input_tree_z_alternate = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spin", direction: "alternate", speed: "1.5s"},
+          props: %{axis: "z", direction: "alternate", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spinx_alternate = [
+      input_tree_x_alternate = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spinX", direction: "alternate", speed: "1.5s"},
+          props: %{axis: "x", direction: "alternate", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spiny_alternate = [
+      input_tree_y_alternate = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spinY", direction: "alternate", speed: "1.5s"},
+          props: %{axis: "y", direction: "alternate", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spin_normal = [
+      input_tree_z_normal = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spin", direction: "normal", speed: "1.5s"},
+          props: %{axis: "z", direction: "normal", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spinx_normal = [
+      input_tree_x_normal = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spinX", direction: "normal", speed: "1.5s"},
+          props: %{axis: "x", direction: "normal", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      input_tree_spiny_normal = [
+      input_tree_y_normal = [
         %Node.MFM.Spin{
-          props: %{keyframes_name: "mfm-spinY", direction: "normal", speed: "1.5s"},
+          props: %{axis: "y", direction: "normal", speed: "1.5s"},
           children: [%Node.Text{props: %{text: "🍮"}}]
         }
       ]
 
-      expected_tree_spin_reverse =
+      expected_tree_z_left =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spin;">🍮</span><style>@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}</style>]
 
-      expected_tree_spinx_reverse =
+      expected_tree_x_left =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinX;">🍮</span><style>@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}</style>]
 
-      expected_tree_spiny_reverse =
+      expected_tree_y_left =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinY;">🍮</span><style>@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}</style>]
 
-      expected_tree_spin_alternate =
+      expected_tree_z_alternate =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spin;">🍮</span><style>@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}</style>]
 
-      expected_tree_spinx_alternate =
+      expected_tree_x_alternate =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinX;">🍮</span><style>@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}</style>]
 
-      expected_tree_spiny_alternate =
+      expected_tree_y_alternate =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinY;">🍮</span><style>@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}</style>]
 
-      expected_tree_spin_normal =
+      expected_tree_z_normal =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spin;">🍮</span><style>@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}</style>]
 
-      expected_tree_spinx_normal =
+      expected_tree_x_normal =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinX;">🍮</span><style>@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}</style>]
 
-      expected_tree_spiny_normal =
+      expected_tree_y_normal =
         ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinY;">🍮</span><style>@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}</style>]
 
-      assert Encoder.to_html(input_tree_spin_reverse) == expected_tree_spin_reverse
-      assert Encoder.to_html(input_tree_spinx_reverse) == expected_tree_spinx_reverse
-      assert Encoder.to_html(input_tree_spiny_reverse) == expected_tree_spiny_reverse
+      assert Encoder.to_html(input_tree_z_left) == expected_tree_z_left
+      assert Encoder.to_html(input_tree_x_left) == expected_tree_x_left
+      assert Encoder.to_html(input_tree_y_left) == expected_tree_y_left
 
-      assert Encoder.to_html(input_tree_spin_alternate) == expected_tree_spin_alternate
-      assert Encoder.to_html(input_tree_spinx_alternate) == expected_tree_spinx_alternate
-      assert Encoder.to_html(input_tree_spiny_alternate) == expected_tree_spiny_alternate
+      assert Encoder.to_html(input_tree_z_alternate) == expected_tree_z_alternate
+      assert Encoder.to_html(input_tree_x_alternate) == expected_tree_x_alternate
+      assert Encoder.to_html(input_tree_y_alternate) == expected_tree_y_alternate
 
-      assert Encoder.to_html(input_tree_spin_normal) == expected_tree_spin_normal
-      assert Encoder.to_html(input_tree_spinx_normal) == expected_tree_spinx_normal
-      assert Encoder.to_html(input_tree_spiny_normal) == expected_tree_spiny_normal
+      assert Encoder.to_html(input_tree_z_normal) == expected_tree_z_normal
+      assert Encoder.to_html(input_tree_x_normal) == expected_tree_x_normal
+      assert Encoder.to_html(input_tree_y_normal) == expected_tree_y_normal
     end
 
     test "it handles shake" do
@@ -395,7 +395,7 @@ defmodule MfmParser.EncoderTest do
           children: [
             %MfmParser.Node.MFM.Spin{
               children: [%MfmParser.Node.Text{props: %{text: "pain"}}],
-              props: %{direction: "normal", keyframes_name: "mfm-spin", speed: "1s"}
+              props: %{direction: "normal", axis: "z", speed: "1s"}
             },
             %MfmParser.Node.Text{props: %{text: " "}},
             %MfmParser.Node.MFM.Rainbow{
diff --git a/test/parser_test.exs b/test/parser_test.exs
index da0a65c..0080a1c 100644
--- a/test/parser_test.exs
+++ b/test/parser_test.exs
@@ -244,7 +244,7 @@ defmodule MfmParser.ParserTest do
       output_default = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spin",
+            axis: "z",
             direction: "normal",
             speed: "1.5s"
           },
@@ -257,8 +257,8 @@ defmodule MfmParser.ParserTest do
       output_left = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spin",
-            direction: "reverse",
+            axis: "z",
+            direction: "left",
             speed: "1.5s"
           },
           children: []
@@ -270,7 +270,7 @@ defmodule MfmParser.ParserTest do
       output_alternate = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spin",
+            axis: "z",
             direction: "alternate",
             speed: "1.5s"
           },
@@ -283,7 +283,7 @@ defmodule MfmParser.ParserTest do
       output_x = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spinX",
+            axis: "x",
             direction: "normal",
             speed: "1.5s"
           },
@@ -296,8 +296,8 @@ defmodule MfmParser.ParserTest do
       output_x_left = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spinX",
-            direction: "reverse",
+            axis: "x",
+            direction: "left",
             speed: "1.5s"
           },
           children: []
@@ -309,7 +309,7 @@ defmodule MfmParser.ParserTest do
       output_x_alternate = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spinX",
+            axis: "x",
             direction: "alternate",
             speed: "1.5s"
           },
@@ -322,7 +322,7 @@ defmodule MfmParser.ParserTest do
       output_y = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spinY",
+            axis: "y",
             direction: "normal",
             speed: "1.5s"
           },
@@ -335,8 +335,8 @@ defmodule MfmParser.ParserTest do
       output_y_left = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spinY",
-            direction: "reverse",
+            axis: "y",
+            direction: "left",
             speed: "1.5s"
           },
           children: []
@@ -348,7 +348,7 @@ defmodule MfmParser.ParserTest do
       output_y_alternate = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spinY",
+            axis: "y",
             direction: "alternate",
             speed: "1.5s"
           },
@@ -361,7 +361,7 @@ defmodule MfmParser.ParserTest do
       output_speed = [
         %MfmParser.Node.MFM.Spin{
           props: %{
-            keyframes_name: "mfm-spin",
+            axis: "z",
             direction: "normal",
             speed: "20s"
           },
@@ -544,7 +544,7 @@ defmodule MfmParser.ParserTest do
                  children: [
                    %MfmParser.Node.MFM.Spin{
                      children: [%MfmParser.Node.Text{props: %{text: "chocolatine"}}],
-                     props: %{direction: "normal", keyframes_name: "mfm-spin", speed: "1.5s"}
+                     props: %{direction: "normal", axis: "z", speed: "1.5s"}
                    }
                  ],
                  props: %{speed: "0.5s"}
@@ -568,7 +568,7 @@ defmodule MfmParser.ParserTest do
                  children: [
                    %MfmParser.Node.MFM.Spin{
                      children: [%MfmParser.Node.Text{props: %{text: "pain"}}],
-                     props: %{direction: "normal", keyframes_name: "mfm-spin", speed: "1.5s"}
+                     props: %{direction: "normal", axis: "z", speed: "1.5s"}
                    },
                    %MfmParser.Node.Text{props: %{text: " "}},
                    %MfmParser.Node.MFM.Rainbow{