diff --git a/bin/assets/layouts/test.css b/bin/assets/layouts/test.css
index 664b8525f..e29e80cfd 100644
--- a/bin/assets/layouts/test.css
+++ b/bin/assets/layouts/test.css
@@ -66,3 +66,12 @@ Tooltip {
 	padding: 8dp;
 	textColor: black;
 }
+
+#tpad {
+	scale: 1;
+}
+
+#tpad:hover {
+	scale: 1.1;
+	transition: scale 0.25s;
+}
diff --git a/include/eepp/math/ease.hpp b/include/eepp/math/ease.hpp
index 1347f5e2c..18825fd25 100644
--- a/include/eepp/math/ease.hpp
+++ b/include/eepp/math/ease.hpp
@@ -1,6 +1,8 @@
 #ifndef EE_MATH_EASE
 #define EE_MATH_EASE
 
+#include <string>
+
 namespace EE { namespace Math {
 
 /** @brief Container class of the Interpolation types. */
@@ -40,6 +42,41 @@ class Ease {
 			ElasticOut,
 			ElasticInOut
 		};
+
+		static Interpolation fromName( const std::string& name, const Interpolation& defaultInterpolation = Ease::Linear ) {
+			if ( "linear" == name )                                             return Ease::Linear;
+			if ( "quadraticin" == name || "quadratic-in" == name )              return Ease::QuadraticIn;
+			if ( "quadraticout" == name || "quadratic-out" == name )            return Ease::QuadraticOut;
+			if ( "quadraticinout" == name || "quadratic-in-out" == name )       return Ease::QuadraticInOut;
+			if ( "sinein" == name || "sine-in" == name )                        return Ease::SineIn;
+			if ( "sineout" == name || "sine-out" == name )                      return Ease::SineOut;
+			if ( "sineinout" == name || "sine-in-out" == name )                 return Ease::SineInOut;
+			if ( "exponentialin" == name || "exponential-in" == name )          return Ease::ExponentialIn;
+			if ( "exponentialout" == name || "exponential-out" == name )        return Ease::ExponentialOut;
+			if ( "exponentialinout" == name || "exponential-in-out" == name )   return Ease::ExponentialInOut;
+			if ( "quarticin" == name || "quartic-in" == name )                  return Ease::QuarticIn;
+			if ( "quarticout" == name || "quartic-out" == name )                return Ease::QuarticOut;
+			if ( "quarticinout" == name || "quartic-in-out" == name )           return Ease::QuarticInOut;
+			if ( "quinticin" == name || "quintic-in" == name )                  return Ease::QuinticIn;
+			if ( "quinticout" == name || "quintic-out" == name )                return Ease::QuinticOut;
+			if ( "quinticinout" == name || "quintic-in-out" == name )           return Ease::QuinticInOut;
+			if ( "circularin" == name || "circular-in" == name )                return Ease::CircularIn;
+			if ( "circularout" == name || "circular-out" == name )              return Ease::CircularOut;
+			if ( "circularinout" == name || "circular-in-out" == name )         return Ease::CircularInOut;
+			if ( "cubicin" == name || "cubic-in" == name )                      return Ease::CubicIn;
+			if ( "cubicout" == name || "cubic-out" == name )                    return Ease::CubicOut;
+			if ( "cubicinout" == name || "cubic-in-out" == name )               return Ease::CubicInOut;
+			if ( "backin" == name || "back-in" == name )                        return Ease::BackIn;
+			if ( "backout" == name || "back-out" == name )                      return Ease::BackOut;
+			if ( "backinout" == name || "back-in-out" == name )                 return Ease::BackInOut;
+			if ( "bouncein" == name || "bounce-in" == name )                    return Ease::BounceIn;
+			if ( "bounceout" == name || "bounce-out" == name )                  return Ease::BounceOut;
+			if ( "bounceinout" == name || "bounce-in-out" == name )             return Ease::BounceInOut;
+			if ( "elasticin" == name || "elastic-in" == name )                  return Ease::ElasticIn;
+			if ( "elasticout" == name || "elastic-out" == name )                return Ease::ElasticOut;
+			if ( "elasticinout" == name || "elastic-in-out" == name )           return Ease::ElasticInOut;
+			return defaultInterpolation;
+		}
 };
 
 }}
diff --git a/include/eepp/scene/nodeattribute.hpp b/include/eepp/scene/nodeattribute.hpp
index 920b66256..a6169fe53 100644
--- a/include/eepp/scene/nodeattribute.hpp
+++ b/include/eepp/scene/nodeattribute.hpp
@@ -4,8 +4,10 @@
 #include <string>
 #include <eepp/math/rect.hpp>
 #include <eepp/core/string.hpp>
+#include <eepp/system/time.hpp>
 #include <eepp/system/color.hpp>
 #include <eepp/math/originpoint.hpp>
+#include <eepp/math/ease.hpp>
 #include <eepp/graphics/blendmode.hpp>
 
 using namespace EE::System;
@@ -116,6 +118,10 @@ class NodeAttribute {
 		Rectf asRectf( const Rectf& defaultValue = Rectf() ) const;
 
 		Uint32 asFontStyle() const;
+
+		Time asTime( const Time& defaultTime = Seconds(0) );
+
+		Ease::Interpolation asInterpolation( const Ease::Interpolation& defaultInterpolation = Ease::Linear );
 	protected:
 		std::string mName;
 		std::string mValue;
diff --git a/include/eepp/ui/uistyle.hpp b/include/eepp/ui/uistyle.hpp
index de21bf336..ac6b6186f 100644
--- a/include/eepp/ui/uistyle.hpp
+++ b/include/eepp/ui/uistyle.hpp
@@ -5,6 +5,7 @@
 #include <eepp/scene/nodeattribute.hpp>
 #include <eepp/ui/css/stylesheetproperty.hpp>
 #include <eepp/graphics/fontstyleconfig.hpp>
+#include <eepp/math/ease.hpp>
 
 using namespace EE::Scene;
 
@@ -18,6 +19,27 @@ class UIWidget;
 
 class EE_API UIStyle : public UIState {
 	public:
+		class TransitionInfo
+		{
+			public:
+				TransitionInfo() :
+					timingFunction( Ease::Linear )
+				{}
+
+				const std::string& getProperty() const { return property; }
+
+				Ease::Interpolation getTimingFunction() const { return timingFunction; }
+
+				const Time& getDelay() const { return delay; };
+
+				const Time& getDuration() const { return duration; }
+
+				std::string property;
+				Ease::Interpolation timingFunction;
+				Time delay;
+				Time duration;
+		};
+
 		static UIStyle * New( UIWidget * widget );
 
 		explicit UIStyle( UIWidget * widget );
@@ -50,16 +72,25 @@ class EE_API UIStyle : public UIState {
 
 		NodeAttribute getAttribute( const Uint32& state, std::vector<std::string> attributeNames ) const;
 
-		void addStyleSheetProperties( int state, const CSS::StyleSheetProperties& properties );
+		void addStyleSheetProperties( const Uint32& state, const CSS::StyleSheetProperties& properties );
 
-		void addStyleSheetProperty( int state, const CSS::StyleSheetProperty& property );
+		void addStyleSheetProperty( const Uint32& state, const CSS::StyleSheetProperty& property );
+
+		bool hasTransition( const Uint32& state, const std::string& propertyName );
+
+		TransitionInfo getTransition( const Uint32& state, const std::string& propertyName );
 	protected:
 		typedef std::map<std::string, NodeAttribute> AttributesMap;
+		typedef std::map<std::string, TransitionInfo> TransitionsMap;
 
 		UIWidget * mWidget;
-		std::map<int, AttributesMap> mStates;
+		std::map<Uint32, AttributesMap> mStates;
+		std::map<Uint32, TransitionsMap> mTransitions;
+		std::map<Uint32, std::vector<NodeAttribute>> mTransitionAttributes;
 
 		void updateState();
+
+		void parseTransitions( const Uint32& state );
 };
 
 }}
diff --git a/src/eepp/scene/nodeattribute.cpp b/src/eepp/scene/nodeattribute.cpp
index 99c65c3a4..fb4bbdab5 100644
--- a/src/eepp/scene/nodeattribute.cpp
+++ b/src/eepp/scene/nodeattribute.cpp
@@ -305,4 +305,20 @@ Uint32 NodeAttribute::asFontStyle() const {
 	return flags;
 }
 
+Time NodeAttribute::asTime( const Time & defaultTime ) {
+	if ( !mValue.empty() ) {
+		if ( mValue[ mValue.size() -1 ] == 'm' ) {
+			return Milliseconds( asFloat() );
+		} else {
+			return Seconds( asFloat() );
+		}
+	}
+
+	return defaultTime;
+}
+
+Ease::Interpolation NodeAttribute::asInterpolation( const Ease::Interpolation& defaultInterpolation ) {
+	return Ease::fromName( mValue, defaultInterpolation );
+}
+
 }}
diff --git a/src/eepp/ui/uistyle.cpp b/src/eepp/ui/uistyle.cpp
index 76461180f..da6fdef0a 100644
--- a/src/eepp/ui/uistyle.cpp
+++ b/src/eepp/ui/uistyle.cpp
@@ -26,6 +26,12 @@ bool UIStyle::stateExists( const EE::Uint32 & state  ) const {
 
 void UIStyle::addAttribute( int state, NodeAttribute attribute ) {
 	mStates[ state ][ attribute.getName() ] = attribute;
+
+	if ( String::startsWith( attribute.getName(), "transition" ) ) {
+		mTransitionAttributes[ state ].push_back( attribute );
+
+		parseTransitions( state );
+	}
 }
 
 void UIStyle::load() {
@@ -53,7 +59,7 @@ void UIStyle::load() {
 	}
 }
 
-void UIStyle::addStyleSheetProperties( int state, const CSS::StyleSheetProperties& properties ) {
+void UIStyle::addStyleSheetProperties(const Uint32 & state, const CSS::StyleSheetProperties& properties ) {
 	if ( !properties.empty() ) {
 		for ( auto it = properties.begin(); it != properties.end(); ++it ) {
 			CSS::StyleSheetProperty property = it->second;
@@ -63,10 +69,39 @@ void UIStyle::addStyleSheetProperties( int state, const CSS::StyleSheetPropertie
 	}
 }
 
-void UIStyle::addStyleSheetProperty( int state, const CSS::StyleSheetProperty& property ) {
+void UIStyle::addStyleSheetProperty( const Uint32& state, const CSS::StyleSheetProperty& property ) {
 	addAttribute( state, NodeAttribute( property.getName(), property.getValue() ) );
 }
 
+bool UIStyle::hasTransition( const Uint32& state, const std::string& propertyName ) {
+	bool ret = mTransitions.find( state ) != mTransitions.end() && mTransitions[ state ].find( propertyName ) != mTransitions[ state ].end();
+
+	// When transitions are declared without state are global
+	if ( state != StateFlagNormal ) {
+		ret = mTransitions.find( StateFlagNormal ) != mTransitions.end() && mTransitions[ StateFlagNormal ].find( propertyName ) != mTransitions[ state ].end();
+	}
+
+	return ret;
+}
+
+UIStyle::TransitionInfo UIStyle::getTransition( const Uint32& state, const std::string& propertyName ) {
+	if ( mTransitions.find( state ) != mTransitions.end() ) {
+		auto propertyTransitionIt = mTransitions[ state ].find( propertyName );
+
+		if ( propertyTransitionIt != mTransitions[ state ].end() ) {
+			return propertyTransitionIt->second;
+		} else if ( mTransitions.find( StateFlagNormal ) != mTransitions.end() ) {
+			propertyTransitionIt = mTransitions[ StateFlagNormal ].find( propertyName );
+
+			if ( propertyTransitionIt != mTransitions[ state ].end() ) {
+				return propertyTransitionIt->second;
+			}
+		}
+	}
+
+	return TransitionInfo();
+}
+
 void UIStyle::onStateChange() {
 	if ( NULL != mWidget && stateExists( mCurrentState ) ) {
 		AttributesMap& attrs = mStates[ mCurrentState ];
@@ -188,4 +223,119 @@ void UIStyle::updateState() {
 	}
 }
 
+void UIStyle::parseTransitions( const Uint32& state ) {
+	std::vector<std::string> properties;
+	std::vector<Time> durations;
+	std::vector<Time> delays;
+	std::vector<Ease::Interpolation> timingFunctions;
+	TransitionsMap transitions;
+
+	if ( mTransitionAttributes.find( state ) == mTransitionAttributes.end() )
+		return;
+
+	auto transitionAttributes = mTransitionAttributes[ state ];
+
+	for ( auto it = transitionAttributes.begin(); it != transitionAttributes.end(); ++it ) {
+		NodeAttribute& attr = *it;
+		if ( attr.getName() == "transition" ) {
+			auto strTransitions = String::split( attr.getValue(), ',' );
+
+			for ( auto tit = strTransitions.begin(); tit != strTransitions.end(); ++tit ) {
+				auto strTransition = String::trim( *tit );
+				auto splitTransition = String::split( strTransition, ' ' );
+
+				if ( !splitTransition.empty() ) {
+					TransitionInfo transitionInfo;
+
+					if ( splitTransition.size() >= 2 ) {
+						std::string property  = splitTransition[0];
+						Time duration = NodeAttribute( attr.getName(), splitTransition[1] ).asTime();
+
+						transitionInfo.property = property;
+						transitionInfo.duration = duration;
+
+						if ( splitTransition.size() >= 3 ) {
+							transitionInfo.timingFunction = Ease::fromName( splitTransition[2] );
+
+							if (  transitionInfo.timingFunction == Ease::Linear && splitTransition[2] != "linear" && splitTransition.size() == 3 ) {
+								transitionInfo.delay = NodeAttribute( attr.getName(), splitTransition[2] ).asTime();
+							} else if ( splitTransition.size() >= 4 ) {
+								transitionInfo.delay = NodeAttribute( attr.getName(), splitTransition[3] ).asTime();
+							}
+						}
+
+						transitions[ transitionInfo.getProperty() ] = transitionInfo;
+					}
+				}
+			}
+		} else if ( attr.getName() == "transitionduration" || attr.getName() == "transition-duration" ) {
+			auto strDurations = String::split( attr.getValue(), ',' );
+
+			for ( auto dit = strDurations.begin(); dit != strDurations.end(); ++dit ) {
+				std::string duration( String::trim( *dit ) );
+
+				durations.push_back( NodeAttribute( attr.getName(), duration ).asTime() );
+			}
+		} else if ( attr.getName() == "transitiondelay" || attr.getName() == "transition-delay" ) {
+			auto strDelays = String::split( attr.getValue(), ',' );
+
+			for ( auto dit = strDelays.begin(); dit != strDelays.end(); ++dit ) {
+				std::string delay( String::trim( *dit ) );
+
+				delays.push_back( NodeAttribute( attr.getName(), delay ).asTime() );
+			}
+		} else if ( attr.getName() == "transitiontimingfunction" || attr.getName() == "transition-timing-function" ) {
+			auto strTimingFuncs = String::split( attr.getValue(), ',' );
+
+			for ( auto dit = strTimingFuncs.begin(); dit != strTimingFuncs.end(); ++dit ) {
+				std::string timingFunction( String::trim( *dit ) );
+
+				timingFunctions.push_back( Ease::fromName( timingFunction ) );
+			}
+		} else if ( attr.getName() == "transitionproperty" || attr.getName() == "transition-property" ) {
+			auto strProperties = String::split( attr.getValue(), ',' );
+
+			for ( auto dit = strProperties.begin(); dit != strProperties.end(); ++dit ) {
+				std::string property( String::trim( *dit ) );
+
+				properties.push_back( property );
+			}
+		}
+	}
+
+	if ( properties.empty() ) {
+		if ( !transitions.empty() )
+			mTransitions[ state ] = transitions;
+
+		return;
+	}
+
+	for ( size_t i = 0; i < properties.size(); i++ ) {
+		const std::string& property = properties.at( i );
+		TransitionInfo transitionInfo;
+
+		transitionInfo.property = property;
+
+		if ( durations.size() < i ) {
+			transitionInfo.duration = durations[i];
+		} else if ( !durations.empty() ) {
+			transitionInfo.duration = durations[0];
+		}
+
+		if ( delays.size() < i ) {
+			transitionInfo.delay = delays[i];
+		} else if ( !delays.empty() ) {
+			transitionInfo.delay = delays[0];
+		}
+
+		if ( timingFunctions.size() < i ) {
+			transitionInfo.timingFunction = timingFunctions[i];
+		} else if ( !delays.empty() ) {
+			transitionInfo.timingFunction = timingFunctions[0];
+		}
+
+		mTransitions[ state ][ property ] = transitionInfo;
+	}
+}
+
 }}
diff --git a/src/eepp/ui/uiwidget.cpp b/src/eepp/ui/uiwidget.cpp
index 69eefd91b..0369625e9 100644
--- a/src/eepp/ui/uiwidget.cpp
+++ b/src/eepp/ui/uiwidget.cpp
@@ -790,7 +790,19 @@ bool UIWidget::setAttribute( const NodeAttribute& attribute, const Uint32& state
 	} else if ( "rotation" == name ) {
 		setRotation( attribute.asFloat() );
 	} else if ( "scale" == name ) {
-		setScale( attribute.asVector2f() );
+		/*if ( NULL != mStyle && mStyle->hasTransition( state, attribute.getName() ) ) {
+			UIStyle::TransitionInfo transitionInfo( mStyle->getTransition( state, attribute.getName() ) );
+			Action * action = NULL;
+
+			if ( Time::Zero == transitionInfo.delay ) {
+				action = Actions::Scale::New( mScale, mStyle->getAttribute( state, { attribute.getName() } ).asVector2f(), transitionInfo.duration, transitionInfo.timingFunction );
+			}
+
+			if ( NULL != action )
+				runAction( action );
+		} else {*/
+			setScale( attribute.asVector2f() );
+		//}
 	} else if ( "rotationoriginpoint" == name ) {
 		setRotationOriginPoint( attribute.asOriginPoint() );
 	} else if ( "scaleoriginpoint" == name ) {