css3动画属性菜鸟,CSS3 animation-timing-function 属性

animation-timing-function 除了上面的几种常用方式之外，还有个一实用的函数，steps(number_of_steps, direction)，这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。

阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。

他有两个参数：

number_of_steps ：阶梯数(必须是一个正整数)，他将动画的总时长按照阶梯数等距划分

direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；

效果示例：

#pic {

height:90px;

width:65;

background-position: -40px -44px;

background-image: url("https://static.runoob.com/images/mix/space-to-top.png");

animation: .6s go steps(7) infinite;

}

@keyframes go {

0% {

background-position-x: -40px;

}

100% {

background-position-x: -1040px;

}

Tmiracle

172***0275@qq.com1年前 (2020-02-27)

css3动画属性菜鸟,CSS3 animation-timing-function 属性 | 菜鸟教程相关推荐

css3动画数字变化,css3动画的更深层次的探究（矩阵变换）
前言其实无论哪一门技术的发展都有其根源可揪,我之前做了一些css3动画的效果,对css3流畅而又实现简单的动画效果深深着迷,遂决定探究下css3动画的来世今生, 本文如有疏漏,请各位看官及时指出,以 ...
CSS3动画序列（CSS3）
CSS3动画序列(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
css3动画模块transform transition animation属性解释
首先来看下对各大浏览器的兼容性 IE Firefox Safari Chrome Opera CSS 2D Transform no 3.5 3.2 2.0 10.5 CSS 3D Transfo ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络先给大家一 ...
css3 动画右侧进入,css3动画（从上、左下、左、右进入页面）
/*动画-start*/.animated{animation-duration:1.5s !important;-webkit-animation-duration:1.5s !important; ...
设置css3动画的顺序,CSS3 “瓷砖”顺序飘落的动画
CSS 语言: CSSSCSS 确定 body { background: #555; } div, :before, :after { position: absolute; } .scene { ...
CSS3 动画专栏：@keyframes与animation的恋曲
目录 0. CSS3的基础模型 1. transform:---()实现元素的自由变换 2. 让我们的元素动起来吧! 2.1 CSS3 @keyframes 规则 2.1.1@keyframes ...
【切图仔日常】浅谈CSS3动画之凌波微步--steps()
背景一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...
浅谈CSS3动画的凌波微步--steps()
背景一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...

css3动画属性菜鸟,CSS3 animation-timing-function 属性 | 菜鸟教程

css3动画属性菜鸟,CSS3 animation-timing-function 属性 | 菜鸟教程相关推荐

最新文章

热门文章