你以为的CSS3 ？

如何实现CSS3动画变幻？

开发工具与关键技术：DW  CSS3动画
作者：蛋蛋
撰写时间：2019年1月16日

#1.下面我们使用HTML来处理CSS3的部分，下面我们来看一个例子.
#2.html与 /html之间的文本描述网页 头部,主要描述文档各种属性和信息body 与 /body 之间的文本是可见的页面内容
见下图所示：

#3.在截图中我们可以看到

• 创建一个HTML文件后再创建CSS文件并用link引入
• 用一个标签div包裹一个自定义的类名“wraper”再在标签写文本内容~~
• 写完源代码后我们进行写CSS样式.内容详情请见下图；

接下来再拓展一些可任意变幻的动画方法：

• Rotate(deg) 旋转，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
• Scale(x,y) 缩放，方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。
• Skew(x,y) 扭曲 ，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

与上面的例子的过渡效果，但是使用了简写的 transition 属性
Eg ： transition{
all是过渡所有；
xs是过渡所需时间
linear是匀速线性速度}

#4. 通过一些transform属性来完成之后用animation 调用

通过@keyframes关键帧 创建动画，将一套 CSS 样式逐渐变化为另一套样式，
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

而调用动画是用的animation
子属性：
1）animation:animation-name;(调用动画)
2）animation-duration (动画播放时间)
3）animation-timing-function (动画播放方式)
4）animation-delay (动画开始播放时间)
5）animation-iteration-count （动画播放次数）

                                                          如有疑问请在下方评论? 谢谢