Get Ready Elementor Templates

How to Make a Modern Business Website using WordPress 2023

Subscribe To My YouTube Channel For More Upcoming Videos

Hero section Image Animation Set


.shape-img2 {
    -webkit-animation-name: rotateMe;
    animation-name: rotateMe;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

.shape-img3{
    -webkit-animation-name: rotateMe;
    animation-name: rotateMe;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.shape-img4{
	-webkit-animation: animationFramesTwo 20s infinite linear;
    animation: animationFramesTwo 20s infinite linear;
}


.shape-img5 {
    
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;

}


.shape-img7{
      -webkit-animation: moveBounce 5s linear infinite;
          animation: moveBounce 5s linear infinite;
}

.shape-img8{
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    -webkit-animation: moveLeftBounce 5s linear infinite;
    animation: moveLeftBounce 5s linear infinite;
}

.shape-img9{
    -webkit-animation: moveScale 3s linear infinite;
    animation: moveScale 3s linear infinite;

}

.shape-img10{
    
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;
}


Animation Keyframes


@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}


@keyframes moveLeftBounce {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes rotateMe {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


@keyframes moveBounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}


@keyframes moveScale {
  0% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
  50% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}

@keyframes animationFramesTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(-73px, 1px) rotate(-36deg);
            transform: translate(-73px, 1px) rotate(-36deg);
  }
  40% {
    -webkit-transform: translate(-141px, -72px) rotate(-72deg);
            transform: translate(-141px, -72px) rotate(-72deg);
  }
  60% {
    -webkit-transform: translate(-83px, -122px) rotate(-108deg);
            transform: translate(-83px, -122px) rotate(-108deg);
  }
  80% {
    -webkit-transform: translate(40px, -72px) rotate(-144deg);
            transform: translate(40px, -72px) rotate(-144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}


Box Item Hover Effect


.single-featured-box{
        -webkit-transition: 0.5s;
    transition: 0.5s;
}


.single-featured-box:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
    
.single-featured-box:hover .elementor-button{
    -webkit-box-shadow: 0 5px 28.5px 1.5px rgba(0, 0, 255, 0.2);
    box-shadow: 0 5px 28.5px 1.5px rgba(0, 0, 255, 0.2);
    color: #fff !important;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}


Service Section (Home Page)


.featured-box-services:hover .elementor-button{
    background-color: #0000ff!important;
}

What We Do Section (Home Page)


.featured-box:hover h3, .featured-box:hover p{
    color: #fff !important;
}

Countdown (Home+About Page)


.back-text{
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    opacity: .13;
}

.single-fun-facts:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    border-color: #ffffff !important;
}


.countmeter .elementor-counter-number-suffix{
    font-size: 18px;
    margin-left: 2px;
    margin-top: 5px;
}


Digital Ex. Section (About Page)


.features-list:hover .elementor-icon{
    background-color: #FA7070!important;
}

.features-list:hover .elementor-icon-box-title{
    color: #fff !important;
}

History Section (About Page)


.about-text h2:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5px;
    width: 50px;
    height: 1px;
    background-color: #0000ff;
}

Footer CSS


.footer-widget h2::before {
    bottom: -0.5px;
    left: 0;
    width: 55px;
    height: 1px;
    background-color: #ffffff;
    content: '';
    position: absolute;
}

Header Snippet inside HTML Widget








Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

  • Money Making Blog Tricks
  • $100k by Freelancing Formula
  • Secret Resources
  • Rich Dad business tactics
  • And, of course about my upcoming videos and plans