CSS3 Transform Translate to the left

Question

I have titles that I want to add CSS3 animation to it

I want to transform

Title

to

[Title]

And I want the square brackets to animate from the center of the word to the borders of it with animation.

something like..

Ti[]tle

to

[Title]

with animation (ofcourse i'm using :before :after to add the brackets with opacity 0 to 1)

my p style:

p:before {
    content: "[";
    position: absolute;
    left: 50%; /*to add the bracket to the center of the word*/
    opacity: 0;
    transition: all 0.7s ease;
}

Thank You !

Answer 1

You can achieve this using frame animations. This way you won't have to hover the element (or anything else) for the animation to start.

See: http://jsfiddle.net/Paf_Sebastien/j2cvagjf/

Set :before and :after like this :

h1:before {
    content: "[";
    position: absolute;
    display: block;
    top: 0;
    -webkit-animation: bracketleft 1s 1 forwards;
    animation: bracketleft 1s 1 forwards;
}

Then handle the animation :

@-webkit-keyframes bracketleft {
  0%   { opacity: 0; left: 50%; }
  100% { opacity: 1; left:-10px; }
}
@-webkit-keyframes bracketright {
  0%   { opacity: 0; right: 50%; }
  100% { opacity: 1; right: -10px; }
}

Answer 2

p {
    display: table;
    position: relative;
}

p:before,
p:after{
    position: absolute;
    opacity: 0;
    transition: all 0.7s ease;
}

p:before {
    content: "[";
    left: 50%;
}

p:after {
    content: "]";
    right: 50%;
}

p:hover:before {
    left: -5px;
    opacity: 1;
}

p:hover:after {
    right: -5px;
    opacity: 1;
}

<p>Title</p>

<p>A Longer Title</p>

Answer 3

Is this what you are looking for?

with this html:

<div>
<a href="" class="link4">TESTING</a>
</div>

and these css's:

div{
        padding: 18px 0 18px 0;
    display: inline-block;
    margin-right: 40px;
}
a {
    color: #999;
    display: inline-block;
    text-align: center;
    width: 200px;
    text-decoration: none;
}
a:before, a:after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

a:before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translate(20px, -1px);
    -moz-transform: translate(20px, -1px);
    transform: translate(20px, -1px);
    vertical-align: top;
}

a:after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translate(-20px, -1px);
    -moz-transform: translate(-20px, -1px);
    transform: translate(-20px, -1px);
}

a:hover:after {
    opacity: 1;
    -webkit-transform: translate(0px, -1px);
    -moz-transform: translate(0px, -1px);
    transform: translate(0px, -1px);
}
a:hover:before {
    opacity: 1;
    -webkit-transform: translate(0px, -1px);
    -moz-transform: translate(0px, -1px);
    transform: translate(0px, -1px);
}

You get this JSFIDDLE