css的这个折角动画的原理是啥
---------------------------------------更新2015-12-09--------------------------------------------------------先回答问题1. 原理：他把动画逐帧保存成了图片，通过背景图的position切换完成了动画效果。2.为什么在我hover的时候，.feature:after上设置了背景图，.feature:before却可以使用。我看了你的css，.feature:before 使用什么？背景图？并没有啊，before仅仅是画了一个白色三角而已，你的这段是多余的。.container:hover .feature:before { -webkit-animation: corner-reverse .15s steps(10); -moz-animation: corner-reverse .15s steps(10); animation: corner-reverse .15s steps(10); z-index: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;}还是我没理解明白？--------------------------------------------------------------------------------------------------而且我们可以用更时尚一些的方法，我下面写了个用CSS3就可以搞定的例子，有兴趣可以看看（请使用chrome新版本打开）demo（demo更新效果）国外更精彩的此技术运用案例：In Pieces - 30 Endangered Species, 30 Pieces.关于demo中所用到的知识，请直接前往张鑫旭的博客学习了解 ↓CSS3 clip-path polygon图形构建与动画变换二三事 ? 张鑫旭此文章有详细的介绍，我就不再写啦，有哪儿不懂可以私信或者留言问我 : )
■网友
首先hover时候触发一段css3动画，样式如下：.summary-article:hover .summary_author::after { -webkit-animation: corner-forward .15s steps(10); animation: corner-forward .15s steps(10); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; z-index: 2;}然后.summary_author::after这个元素的样式如下：.summary-article .summary_author::after { content: " "; display: block; position: absolute; top: 0; right: 0; height: 4.5em; width: 4.5em; background: url(\u0026#39;data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgwIiBoZWlnaHQ9IjcyIiB4bWxucz0i…2Ii8+PHBhdGggZD0iTTgwOC0xdjczaDczbC03My03M3oiIGZpbGw9IiNjMDMiLz48L3N2Zz4=\u0026#39;) -0.5em 0 no-repeat; background-size: 55em 4.5em;把background那一坨base64打开，长这样： 【css的这个折角动画的原理是啥】 
看到这大概就明白了吧，开始的时候角上是第一个图，hover以后每0.15秒切换到下一个图，动画完成后就是折角打开的样子了，右上角那个头像一直都在那，开始的时候之所以左下部分看不到是因为还有summary_author::before这个元素，这个元素样式如下：.summary-article .summary_author::before { content: " "; display: block; position: absolute; top: 0; right: 0; border: solid 2.25em; border-color: transparent transparent #fff #fff;}它负责把头像的左下角遮住，右上角露出来。我打不开你的代码，只能看了看原代码随便说说了。
■网友
泻药。不打算回答如何实现这个具体的效果，只分享一点可能用得到的经验。chrome如何查看hover时的样式定义？打开chrome控制台，查看CSS样式是前端最爱干的事儿，然而hover这类需要交互时才会出现的样式却让前端很尴尬，因为很难捕捉到这时的状态。殊不知 chrome 为了方便这种需xiao求tou，很贴心的出了模拟 a 链接访问状态的功能（当然不仅仅作用于 a 标签），如下图：
推荐阅读
- 如果你的多肉出现这个长势，要注意这个细节，多肉才会越来越美！
- 『活动』让孩子们欢欢喜喜过新年 这个元旦好有爱！南京聋校举办多种形式庆祝活动
- 免费“单人套餐”背后的故事：爱心让这个冬天不再寒冷
- 夫子庙■“秦淮灯会”“夫子庙小吃”等非遗重点保护 护航夫子庙，这个法明年施行
- 气温■@江苏人，这个周末天气晴！温度缓慢回升，早晚依旧“冻”人
- 黄金时间■黄金时间丨哪种产品最节水？购买产品请注意这个标识！
- 『黄金时间』请认准这个蓝色的标志！ 黄金时间丨同行业中用水最少的企业
- 汽车|评测 | 懂你所想，予你所需！依维柯欧胜2021款这个“搭档”可还行？
- 电动车|这个月，原来小编们这么拼
- 漏洞|家里有孩子的，一定不要忽略这个漏洞！警惕！同一小区8人确诊