CSS3 变换向左平移答案

【问题标题】：CSS3 Transform Translate to the leftCSS3 变换向左平移
【发布时间】：2015-09-16 19:59:20
【问题描述】：

我有想要添加 CSS3 动画的标题

我想变身

标题

到

[标题]

我希望方括号从单词的中心动画到它的边界。

类似..

标题[]标题

到

[标题]

带动画（当然我使用:before :after 将括号与opacity 添加到0 到1）

我的p风格：

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

谢谢！

【问题讨论】：

你的问题是什么？代码有什么问题？
@FabrizioCalderan 这是起始样式，我仍然缺少翻译类，这种样式将方括号添加到单词的中心，我想翻译左边的括号词
为什么在定位时需要翻译它。为什么不只是转换/动画位置值？

标签： css animation translate-animation

【解决方案1】：

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>

【讨论】：

没错，但是你放的是准确的像素值，关键是我不知道字的大小，谢谢回复
字的大小无关紧要。 -5px 会将括号定位在距单词末尾 5px 的位置，无论它有多长
此解决方案强制您悬停元素以查看动画。自动动画参考我的回答。
@Sebastien 这已经是我想要的了，谢谢你的回答

【解决方案2】：

这是你要找的吗？

使用这个 html：

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

还有这些css：

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);
}

你会得到这个JSFIDDLE

【讨论】：

【解决方案3】：

您可以使用帧动画来实现这一点。这样您就不必悬停元素（或其他任何东西）来启动动画。

见：http://jsfiddle.net/Paf_Sebastien/j2cvagjf/

像这样设置:before和:after：

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

然后处理动画：

@-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; }
}

【讨论】：