CSS3变换：向左平移

Question

我有一些标题想要添加CSS3动画

我想要将

Title

转换成

[Title]

同时，我希望方括号从单词中心动画到单词边缘。

类似于这样..

Ti[]tle

转换为

[Title]

使用动画（当然我会使用:before和:after添加方括号，使用opacity从0到1的效果）

我的段落样式：

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

谢谢！

- Joseph Khella

---

你有什么问题吗？代码有什么问题吗？ - Fabrizio Calderan

@FabrizioCalderan 这是起始样式，我还缺少翻译类。这个样式将方括号添加到单词中心，我想将括号翻译到单词左侧。 - Joseph Khella

当你正在定位它时，为什么需要将其翻译成另一种语言呢？为什么不直接转换/动画化位置值？ - Paulie_D

Answer 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>

- Turnip

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Joseph Khella

单词的大小并不重要。-5px将使括号距离单词结尾5px，无论单词有多长。 - Turnip

这个解决方案强制你悬停在元素上才能看到动画效果。请参考我的答案以获得自动动画。 - Sebastien

@Sebastien，这已经是我想要的了，谢谢您的回答。 - Joseph Khella

Answer 2

这是你要找的吗？

用这个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);
}

你得到了这个JSFIDDLE。

- Alvaro Menéndez

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

- Sebastien