css图片动画主要知识点

1.<meta charset="UTF-8"> 作用:如果网页出现了中文，在头部没有这一句 的话将会导致中文乱码。因此这是编码格式，告诉给浏览器用什么方式来读这页代码。
2. <meta name="viewport" content="width=device-width,initial-scale=1.0">
（1）viewport表示设备的屏幕上能用来显示我们的网页的那一块区域
（2）content表示用来设置可视区域：
width:可视区域的宽度，值可为数字或关键词device-width;height同理；
intial-scale:页面显示时可视区域的缩放级别，1.0表示未缩放
（3）maximum-scale=1.0, minimum-scale=1.0;缩放级别大小
（4） user-scalable:表示是否进行缩放，no表示不缩放
3.<meta http-equiv="X-UA-Compatible" content="ie=edge" />
X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
注意：<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >：平常使用谷歌比较多的可以用这个代码，再如果ie版本比较低就直接改为ie=5或者789之类的；
4.①width:250px; div区域宽度 是 250 像素。
②height:300px; div区域高度 是 300 像素。
③margin:200 auto; 可以让div居中。
④transform-style: preserve-3d 变换样式：表示所有子元素在3D空间中呈现。
⑤@keyframes xpy:定义一个动画效果为：xpy,使 div 元素匀速向下移动,得和animation:xpy 20s infinite;一起使用
⑥animation-timing-function: linear;动画匀速

主要的图片动画效果已经学习完毕，接下来自己实现一个动画