Repository navigation
第 109 期(W3C标准-CSS-动画)：翻转缩放动画 #112
Description
CSS 函数 scale() 用于定义元素的缩放值来放大或缩小元素，当其只有一个参数时，元素会等比缩放。这里有个鲜为人知的技巧是：它的参数值可以为负数。当为负数时，元素会左右、上下翻转（效果和 rotate(180deg) 一样），然后进行缩放。那如果我们定义了 scale 的值从正整数到负整数过渡会如何？效果就是实现了元素在翻转的同时缩放。
<p class="scale">The quick brown fox jumps over the lazy dog.</p>.scale {
font-size: 30px;
text-align: center;
transform: scale(1);
animation: scale 5s infinite linear;
}
@keyframes scale {
50% { transform: scale(-1); }
100% { transform: scale(-1); }
}
Activity