Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.

<script>
(function () {
	var tildoshnaya_frame = $(".tn-elem__1099535081560277586082");
	var tildoshnaya_block = $("#rec109953511");

	tildoshnaya_frame.prepend("<div class='hover'>");
	var destination = tildoshnaya_frame.find(".hover");
	tildoshnaya_block.appendTo(destination);

	tildoshnaya_frame.find(".t396__artboard").addClass("noBackground");
	tildoshnaya_frame.mouseenter(function(){
		tildoshnaya_frame.find(".hover").addClass("active");
	})
	tildoshnaya_frame.mouseleave(function(){
		tildoshnaya_frame.find(".hover").removeClass("active");
	})
	tildoshnaya_frame.addClass("wrap");
}());
</script>

<style>
.hover{
  position:absolute;
  width:100%;
  height:100%;
  /* Куда прячем? */
  /* translateY(100%) вниз*/
  /* translateY(-100%) вверх*/
   /*translateX(100%) вправо*/
  /* translateX(-100%) влево*/
  /* translateX(0%) центр, просто прозрачность*/
  transform:translateX(-100%) rotate(365deg);
  opacity:0;
  /* Скорость анимации*/
  -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
   -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
     -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
        transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */

-webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
   -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
     -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
        transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.hover.active{
  transform:translateY(0) translateX(0) rotate(0deg);
  opacity:1;
}

.noBackground{background-color:transparent!important}
.wrap{overflow:hidden}
</style>
Made on
Tilda