CSS3动画讲解

CSS3动画讲解Css3AnimationExplanation01css3简介02css32D转换常见知识点03css3动画知识点ONTENTS内容大纲Ccss3简介css用于控制网页的样式和布局。css3是css技术的升级版本,他可以制作出很多中特效，效果可以和一些js效果一样，不过代码却比js简单很多。css3不同于css的地方就是兼容问题，css3写出来的样式，ie8以及更低版本都很难兼容css32D转换常见知识点translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。使用方法：•代码案例•div{transform:translate(50px,100px);}•详解•transform就像font-size:12px中的font-size一样，该属性允许我们对元素进行旋转、缩放、移动或倾斜；•translate中有两个参数，第一个参数是X轴坐标，第二个参数是Y轴坐标。如果没有第二个参数就默认Y轴的移动距离为0，也就是不变。•效果图•浅红色是没有给transform属性之前的样式；•深红色是给了transform:translate(50px,100px)后的样式translate()rotate()方法，设置元素旋转的角度。使用方法：•代码案例•div{transform:rotate(30deg);}•详解•rotate中只有一个参数，是设定角度值，deg是单位。此时div将会顺时针旋转30度，如果角度是负值(-30deg)，div将会逆时针旋转30度•效果图•浅红色是没有给rotate属性之前的样式；•图一是给了transform:rotate(30deg)后的样式；•图二是给了transform:rotate(-30deg)后的样式；图1顺时针图2逆时针css32D转换常见知识点rotate()@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。使用方法：方法1@keyframesmyfirst{from{background:red;}to{background:yellow;}}讲解：•第一种方法和第二种方法一样，都是让元素的背景颜色从红色变成黄色。第二种方法可以自己设定任意百分比，以及对应的样式。元素引入这个myfirst后就会出现过渡效果。•引入方法•div{width:100px;height:100px;background:red;position:relative;animation:myfirst1slinearinfinite;}•animation将动画与div元素绑定。后面的myfirst1slinear2sinfinitealternate是缩写；见下一页css3动画知识点@keyframes规则方法2@keyframesmyfirst{0%{background:red;}50%{background:green;}100%{background:yellow;}}animation-name规定需要绑定到选择器的keyframe名称。(myfirst)animation-duration规定完成动画所花费的时间，以秒或毫秒计。(1s)animation-timing-function规定动画的速度曲线。(linear)•linear动画从头到尾的速度是相同的。•ease默认。动画以低速开始，然后加快，在结束前变慢。•ease-in动画以低速开始。•ease-out动画以低速结束。•ease-in-out动画以低速开始和结束。animation-delay规定在动画开始之前的延迟。(2s)animation-iteration-count规定动画应该播放的次数。(infinite)•n定义动画播放次数的数值。•infiniteanimation-direction规定是否应该轮流反向播放动画。(alternate)•normal默认值。动画应该正常播放。•alternate动画应该轮流反向播放。css3动画知识点animation属性감사합니다