css3布局和动画，css3布局方式

css动画用什么规则

用法： transform-origin： (x， y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。

CSS 的动画属性有很多，其中包括：animation、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction。

@keyframes规则。from{属性：值；} to{属性：值；}。0%{属性：值；} 100%{属性：值；}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。

@keyframes规则相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name就可以执行动画。animation-duration属性animation-duration属性用于指定执行一个周期动画应该花多长时间。

可以使用CSS中的animation属性和@keyframes规则来实现图片自上而下落下来的动画效果。

相关问答

Q1: css3过渡和动画的区别详解

1、指代不同 animation ：属性是一个简写属性，用于设置六个动画属性。transition：属性是一个简写属性，用于设置四个过渡属性。

2、CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。

3、相比于过渡属性transition的设置，动画animation的实现支持更为复杂的动态样式效果。

4、动画功能类似于过渡功能，两者都可以通过更改位置、大小、颜色和透明度，以及旋转、缩放、平移等方式，对元素施加动画效果。与过渡操作相同，可以指定一些计时函数来控制动画的进度。

5、窗口动画和过渡动画是指在窗口（activity或dialog）切换时的显示动画，窗口动画的范围相对较广，包括activity和dialog，而过渡动画只包括activity。

6、学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

Q2: CSS3布局方式有哪些?

1、常见css3布局和动画的页面布局方式css3布局和动画：表格布局、DIV+CSS布局、框架布局。表格布局：用来显示较多css3布局和动画的数据，如OA系统、ERP系统或CRM系统。（一般用在局部）DIV+CSS布局：相对来说最灵活的布局方式，完全实现内容和样式的分离。

2、弹性盒模型布局flex 这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。rem布局 rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配。

3、六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。

4、CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

5、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供css3布局和动画了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。 但flex 的缺点在于，它不支持低版本的 IE 浏览器。

css3布局和动画的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3布局方式、css3布局和动画的信息别忘了在本站进行查找喔。