Блок с анимацией слайда при наведении

flipY

<section>
	<div class="container">
		<div class="row">
			<div class="col-6">
				<a href="#" class="services-item">

					<div class="services-item__title">Наш автопарк</div>
					<div class="services-item__text">
						Помещения склада разделены на камеры, имеющие различные размеры и температурные условия для хранения
						продуктов питания.
					</div>
					<span class="more-link"><i class="fas fa-chevron-circle-right icon icon-more"></i> Подробнее</span>

				</a>
			</div>

			<div class="col-6">
				<a href="#" class="services-item">

					<div class="services-item__title">Складской комплекс</div>
					<div class="services-item__text">
						Помещения склада разделены на камеры, имеющие различные размеры и температурные условия для хранения
						продуктов питания.
					</div>
					<span class="more-link"><i class="fas fa-chevron-circle-right icon"></i> Подробнее</span>

				</a>
			</div>
		</div>
	</div>
</section>

//SASS
a, 
a:hover
	text-decoration: none
	background: #000
.services-item
	position: relative
	display: flex
	flex-wrap: wrap
	align-content: center
	justify-content: center
	height: 340px
	color: #fff
	text-align: center
	padding: 20px 30px
	background-size: cover !important
	text-decoration: none
	&:hover
		color: #fff
	&__title
		position: relative
		font-size: 2em
		text-transform: uppercase
		transform: translate3d(0,36px,0)  /*Slide top */
		transition: transform .35s
		z-index: 2
		text-decoration: none
	&__text
		position:relative
		font-size: 1em
		padding: 0
		opacity: 0
		z-index: 2
		transform: translate3d(0,20px,0)   /*Slide top */
		transition: opacity .35s,transform .35s
	.more-link
		position: absolute
		right: -30px
		bottom: 30px
		opacity: 0;
		z-index: 2
		transition: all .3s ease-in-out

.more-link
	position: relative
	display: flex
	align-items: center
	color: #fff
	font-size: 1em
	font-weight: bold
	text-transform: uppercase
	padding-left: 52px
	letter-spacing: .065em
	background-size: 0
	&:hover
		color: #fff
		.icon
			left: 8px
	.icon
		//Font Awesome
		display: inline-block
		position: absolute
		left: 0
		font-size: 25px
		color: #fff
		transition: all .3s ease-in-out

/* Slide on hover */
.services-item:hover .services-item__title 
	transform: translate3d(0,0,0)
.services-item:hover .services-item__text
	transform: translate3d(0,0,0);
	opacity: 1
.services-item:hover .more-link
	right: 30px
	opacity: 1

.flipInY
	backface-visibility: visible !important
	animation-name: flipInY

@-webkit-keyframes flipInY
	from
		transform: perspective(400px) rotate3d(0,1,0,90deg)
		animation-timing-function: ease-in
		opacity: 0
	40%
		transform: perspective(400px) rotate3d(0,1,0,-20deg)
		animation-timing-function: ease-in
	60%
		transform: perspective(400px) rotate3d(0,1,0,10deg)
		opacity: 1
	80%
		transform: perspective(400px) rotate3d(0,1,0,-5deg)
	to
		transform: perspective(400px)



//style
a, a:hover {text-decoration: none;background: #000;}
	.services-item{
		position:relative;
		display:flex;
		flex-wrap:wrap;
		align-content:center;
		justify-content:center;
		height:340px;
		color:#fff;
		text-align:center;
		padding:20px 30px;
		background-size:cover !important;
		text-decoration:none
	}
	.services-item:hover{color:#fff;}
	.services-item__title{
		position:relative;
		font-family:"Affect",Arial,sans-serif;
		font-size:28px;
		font-weight:400;
		line-height:32px;
		text-transform:uppercase;
		transform:translate3d(0,36px,0);  /*Slide top */
		transition:transform .35s;
		z-index:2;
		text-decoration:none
	}
	.services-item__text{
		position:relative;
		font-size:14px;
		font-weight:300;
		line-height:20px;
		padding:0;
		opacity:0;
		z-index:2;
		transform:translate3d(0,20px,0);   /*Slide top */
		transition:opacity .35s,transform .35s
	}
	.services-item .more-link{
		position:absolute;
		right:-30px;
		bottom:30px;
		opacity:0;
		z-index:2;
		transition:all .3s ease-in-out
	}

	.more-link{
		position:relative;
		display:flex;
		align-items:center;
		color:#fff;
		font-family:"Affect",Arial,sans-serif;
		font-size:14px;
		font-weight:700;
		line-height:26px;
		text-transform:uppercase;
		padding-left:52px;
		letter-spacing:.065em;
		background-size:0
	}
	.more-link:hover{color:#fff}
	.more-link:hover .icon{left:8px}
	.more-link .icon{
		display:inline-block;
		position:absolute;
		left:0;
		font-size:25px;
		color:#fff;
		transition:all .3s ease-in-out
	}
	/* Slide on hover */
	.services-item:hover .services-item__title {transform:translate3d(0,0,0)}
	.services-item:hover .services-item__text {transform:translate3d(0,0,0);opacity:1}
	.services-item:hover .more-link {right:30px;opacity:1}


	@-webkit-keyframes flipInY{
		from{
			transform:perspective(400px) rotate3d(0,1,0,90deg);
			animation-timing-function:ease-in;
			opacity:0
			}
		40%{
			transform:perspective(400px) rotate3d(0,1,0,-20deg);
			animation-timing-function:ease-in}
		60%{
			transform:perspective(400px) rotate3d(0,1,0,10deg);
			opacity:1}
		80%{
			transform:perspective(400px) rotate3d(0,1,0,-5deg)}
		to{transform:perspective(400px)}
	}
	.flipInY{backface-visibility:visible !important;animation-name:flipInY}