59 lines (42 loc) · 3.59 KB

transform & transition & animation

立方体

transform-style, perspective, translateZ

<iframe height="407" style="width: 100%;" scrolling="no" title="cube" src="https://codepen.io/duyue6002/embed/RwWMxjO?height=407&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen cube by 6002 (@duyue6002) on CodePen. </iframe>

Bounce

<iframe height="500" style="width: 100%;" scrolling="no" title="Bounce" src="https://codepen.io/duyue6002/embed/ZEbxNeR?height=497&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Bounce by 6002 (@duyue6002) on CodePen. </iframe>

PopTip 弹性过渡

<iframe height="400" style="width: 100%;" scrolling="no" title="Elastic" src="https://codepen.io/duyue6002/embed/KKdoLRR?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Elastic by 6002 (@duyue6002) on CodePen. </iframe>

Blink

<iframe height="385" style="width: 100%;" scrolling="no" title="Blink" src="https://codepen.io/duyue6002/embed/ZEbxdbN?height=385&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Blink by 6002 (@duyue6002) on CodePen. </iframe>

打字效果

<iframe height="265" style="width: 100%;" scrolling="no" title="Typing" src="https://codepen.io/duyue6002/embed/WNQzqRa?height=265&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Typing by 6002 (@duyue6002) on CodePen. </iframe>

Shaking

<iframe height="265" style="width: 100%;" scrolling="no" title="Shake" src="https://codepen.io/duyue6002/embed/dyYmBzW?height=265&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Shake by 6002 (@duyue6002) on CodePen. </iframe>

Smooth

<iframe height="300" style="width: 100%;" scrolling="no" title="Smooth" src="https://codepen.io/duyue6002/embed/LYpdKry?height=265&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Smooth by 6002 (@duyue6002) on CodePen. </iframe>

Circle Spin

<iframe height="447" style="width: 100%;" scrolling="no" title="Circle-Spin" src="https://codepen.io/duyue6002/embed/RwWMXNY?height=447&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen Circle-Spin by 6002 (@duyue6002) on CodePen. </iframe>