استایل زیبا با scss برای هاور - Stunning Hover Effects (نمونه 7) : افکت شهر متحرک

@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

body {

  font-family: 'Martel Sans', sans-serif;

  background-color: #000;

}

section {

  height: 350px;

  width: 94%;

  box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);

  background-color: #000;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0 auto 0px;

}

section a {

  text-transform: uppercase;

  text-align: center;

  text-decoration: none;

  font-size: 4.875em;

  font-weight: 900;

  color: #fff;

}

section a:after, section a:before {

  content: '';

}

section.p16 {

  background-image: url("7.jpg");

}

section.p16 a {

  width: 632px;

  height: 124px;

  line-height: 124px;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -316px;

  margin-top: -62px;

  z-index: 10;

  overflow: hidden;

}

section.p16 a:before, section.p16 a:after {

  position: absolute;

  left: 0;

  display: block;

  height: 150px;

  background-size: contain;

  opacity: 1;

  -webkit-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);

  -moz-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);

  transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);

  opacity: 0;

  top: 50px;

}

section.p16 a:before {

  background-image: url(7-1.png);

  width: 1772px;

  z-index: -1;

  -webkit-animation: chicaum 60s infinite linear;

  -moz-animation: chicaum 60s infinite linear;

  animation: chicaum 60s infinite linear;

}

section.p16 a:after {

  background-image: url(7-2.png);

  width: 1682px;

  z-index: 1;

  -webkit-animation: chicadois 30s infinite linear;

  -moz-animation: chicadois 30s infinite linear;

  animation: chicadois 30s infinite linear;

}

section.p16 a:hover:before, section.p16 a:hover:after {

  opacity: 1;

  top: 0;

}

section.p16 a:hover:before {

  transition-delay: .2s;

}

@-webkit-keyframes chicaum {

  from {

    -webkit-transform: translate(0px);

  }

  to {

    -webkit-transform: translate(-886px);

  }

}

@-moz-keyframes chicaum {

  from {

    -moz-transform: translate(0px);

  }

  to {

    -moz-transform: translate(-886px);

  }

}

@keyframes chicaum {

  from {

    -webkit-transform: translate(0px);

    -moz-transform: translate(0px);

    -ms-transform: translate(0px);

    -o-transform: translate(0px);

    transform: translate(0px);

  }

  to {

    -webkit-transform: translate(-886px);

    -moz-transform: translate(-886px);

    -ms-transform: translate(-886px);

    -o-transform: translate(-886px);

    transform: translate(-886px);

  }

}

@-webkit-keyframes chicadois {

  from {

    -webkit-transform: translate(0px);

  }

  to {

    -webkit-transform: translate(-841px);

  }

}

@-moz-keyframes chicadois {

  from {

    -moz-transform: translate(0px);

  }

  to {

    -moz-transform: translate(-841px);

  }

}

@keyframes chicadois {

  from {

    -webkit-transform: translate(0px);

    -moz-transform: translate(0px);

    -ms-transform: translate(0px);

    -o-transform: translate(0px);

    transform: translate(0px);

  }

  to {

    -webkit-transform: translate(-841px);

    -moz-transform: translate(-841px);

    -ms-transform: translate(-841px);

    -o-transform: translate(-841px);

    transform: translate(-841px);

  }

}