css3动画属性 写法及属性 |
您所在的位置：网站首页 › 糖心txvlog里面哪几个女主好看 › css3动画属性 写法及属性 |
|
css3动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 1.关键帧的定义关键帧动画可以定义多个状态，关键帧动画则可以定义任意个的关键帧，能实现更复杂的动画效果。 而过渡动画只能定义第一帧和最后一帧。 关键帧的格式写法制定关键帧： @keyframes 关键帧的名称{ 0%{ //开始状态 } 25%{ } 50%{ } … 100%{ //结束状态 } } 或 @keyframes mymove{ from{初始状态属性} to{结束状态属性} } 2. animation 复合属性 animation-name关键帧的名称animation-duration动画的持续的时间animation-timing-function动画运用的类型属性：linear ease ease-in ease-out ease-in-out step-startanimation-delay动画的延迟animation-iteration-count动画运动的次数属性：infinite：无限循环 number: 循环的次数animation-direction运动的方向normal reverse alternate alternate-reverseanimation-play-state设置动画的状态paused running常用的写法 animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间 3. animation 与 transition 的区别 transition:animation过渡动画特点：需要事件进行触发特点：不需要事件进行触发。调用关键帧即可 相同点：都是随着时间改变元素的属性值。不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |