• Bracket Animation – CSS & JavaScript Text Animation Snippets

    You can make some pretty dazzling text effects with basic CSS and a few lines of JavaScript. These effects range from text display animations to 3D rotations or anything else you can imagine. –Bracket Animation – CSS & JavaScript Text Animation Snippets

    And in this post I’ve cataloged coolest examples from around the web showcasing what you can do with just a little bit of stylized text and CSS code.

    Here’s fairly common text animation technique which I see all the time. It uses brackets with rotating text almost like a rolodex on the page.

    This animation mimics the typing carousel effect I mentioned earlier, except this can be made with just CSS. It relies on a custom looping animation that moves from one CSS keyframe to another, each frame displaying a different word or phrase in the rotating text.

    I find this effect much subtler and easier to read on a homepage. If you’re looking for some cool text effects for your homepage this would be an excellent choice.

    HTML source :

    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    
    <div class="content">
      <div class="content__container">
        <p class="content__container__text">
          I am
        </p>
        
        <ul class="content__container__list">
          <li class="content__container__list__item">Web Designer !</li>
          <li class="content__container__list__item">Web Developer !</li>
          <li class="content__container__list__item">Freelancer !</li>
          <li class="content__container__list__item">A Marketer !</li>
        </ul>
      </div>
    </div>

     

     

    CSS source :

    body {
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #34495e;
    }
    
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      height: 160px;
      overflow: hidden;
      font-family: 'Lato', sans-serif;
      font-size: 35px;
      line-height: 40px;
      color: #ecf0f1;
    }
    .content__container {
      font-weight: 600;
      overflow: hidden;
      height: 40px;
      padding: 0 40px;
    }
    .content__container:before {
      content: '[';
      left: 0;
    }
    .content__container:after {
      content: ']';
      position: absolute;
      right: 0;
    }
    .content__container:after, .content__container:before {
      position: absolute;
      top: 0;
      color: #16a085;
      font-size: 42px;
      line-height: 40px;
      -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    .content__container__text {
      display: inline;
      float: left;
      margin: 0;
    }
    .content__container__list {
      margin-top: 0;
      padding-left: 110px;
      text-align: left;
      list-style: none;
      -webkit-animation-name: change;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      animation-name: change;
      animation-duration: 10s;
      animation-iteration-count: infinite;
    }
    .content__container__list__item {
      line-height: 40px;
      margin: 0;
    }
    
    @-webkit-keyframes opacity {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    @-webkit-keyframes change {
      0%, 12.66%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      16.66%, 29.32% {
        -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -25%, 0);
      }
      33.32%,45.98% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -50%, 0);
      }
      49.98%,62.64% {
        -webkit-transform: translate3d(0, -75%, 0);
                transform: translate3d(0, -75%, 0);
      }
      66.64%,79.3% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -50%, 0);
      }
      83.3%,95.96% {
        -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -25%, 0);
      }
    }
    @keyframes opacity {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    @keyframes change {
      0%, 12.66%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      16.66%, 29.32% {
        -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -25%, 0);
      }
      33.32%,45.98% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -50%, 0);
      }
      49.98%,62.64% {
        -webkit-transform: translate3d(0, -75%, 0);
                transform: translate3d(0, -75%, 0);
      }
      66.64%,79.3% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -50%, 0);
      }
      83.3%,95.96% {
        -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -25%, 0);
      }
    }

    If you find it useful, share with your friends.

    Written by

    Murtaza
    Agha Murtaza is a web designer and WordPress developer with over one year of experience. You can visit his business site here . Murtaza is the CEO of codingle.com. He also has an opinion on just about every subject. You can follow his rants on Twitter @murtaxa_n.