Constant CSS Effect (instead of only on Hover)

[justinwallis]

It is necessary, there needs to be an option built within. Many people would find this useful, as this is the best looking CSS i've seen.

I want the header logo on my website http://DefeatDisease.com to be Constant (hover-shadow)

Thank You

[IanLunn]

This would only apply to continuous effects and also falls outside of the scope of demonstrating hover effects only, so I won't add it to the project. This issue can serve as an FAQ for anyone else wanting to achieve the same though.

To make an effect always active, move all of the properties from the :hover selector into the class selector. For example, the hover-shadow effect would go from this (SASS version):

@mixin hover-shadow {
    display: inline-block;
    position: relative;
    @include prefixed(transition-duration, $defaultDuration);
    @include prefixed(transition-property, transform);

    @include hacks();

    &:before {
      pointer-events: none;
      position: absolute;
      z-index: -1;
      content: '';
      top: 100%;
      left: 5%;
      height: 10px;
      width: 90%;
      opacity: 0;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
        @include prefixed(transition-duration, $defaultDuration);
        @include prefixed(transition-property, "transform, opacity");
    }

    &:hover,
    &:focus,
    &:active {
        @include prefixed(transform, translateY(-6px));
        @include prefixed(animation-name, hover);
        @include prefixed(animation-duration, 1.5s);
        @include prefixed(animation-delay, $defaultDuration);
        @include prefixed(animation-timing-function, linear);
        @include prefixed(animation-iteration-count, infinite);
        @include prefixed(animation-direction, alternate);

        &:before {
            opacity: .4;
            @include prefixed(transform, translateY(6px));
            @include prefixed(animation-name, hover-shadow);
            @include prefixed(animation-duration, 1.5s);
            @include prefixed(animation-delay, .3s);
            @include prefixed(animation-timing-function, linear);
            @include prefixed(animation-iteration-count, infinite);
            @include prefixed(animation-direction, alternate);
        }
    }
}

To this:

@mixin hover-shadow {
    display: inline-block;
    position: relative;
    @include prefixed(transition-duration, $defaultDuration);
    @include prefixed(transition-property, transform);

    @include hacks();

        @include prefixed(transform, translateY(-6px));
    @include prefixed(animation-name, hover);
    @include prefixed(animation-duration, 1.5s);
    @include prefixed(animation-delay, $defaultDuration);
    @include prefixed(animation-timing-function, linear);
    @include prefixed(animation-iteration-count, infinite);
    @include prefixed(animation-direction, alternate);

    &:before {
      pointer-events: none;
      position: absolute;
      z-index: -1;
      content: '';
      top: 100%;
      left: 5%;
      height: 10px;
      width: 90%;
      opacity: 0;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
        @include prefixed(transition-duration, $defaultDuration);
        @include prefixed(transition-property, "transform, opacity");
opacity: .4;
        @include prefixed(transform, translateY(6px));
        @include prefixed(animation-name, hover-shadow);
        @include prefixed(animation-duration, 1.5s);
        @include prefixed(animation-delay, .3s);
        @include prefixed(animation-timing-function, linear);
        @include prefixed(animation-iteration-count, infinite);
        @include prefixed(animation-direction, alternate);
    }
}