当前位置：网站首页 > 技术文章 > 正文

jq的动画、css3动画

myzbx 2025-03-11 19:10 7 浏览

在实现动画效果，我们可以采用css3或者jQuery,而在jQuery中我们通常采用animate。先了解animate的语法：

(selector).animate({styles},speed,easing,callback)

1、{style}：规定产生动画效果的一个或多个 CSS 属性/值。（具体w3c等可查，这里不累赘）

2、speed：规定动画的速度。采用取值的方式有三种

毫秒
‘slow’
‘fast’

3、easing：规定在动画不同点的元素的速度。

默认值是‘swing’ 开头和结尾慢，中间快
'linear' 匀速

4、callback

我们来简单的实践一下

html代码：

jq代码：

效果

如果我用css3怎么做了，首先想到的是animation 、transition,虽然在pc的兼容性不好，现在前端工程师可能做大部分项目手机端。我们还是先了解animation的效果吧

animation的基础语法：

selector{

animation:
animation-name 动画的名字
animation-duration 动画的周期
animation-timing-function 动画的速度曲线
animation-delay 动画的初始时间
animation-iteration-count 动画的次数
animation-direction 动画是否反相
animation-play-state 动画是否暂停
; }

animation-timing-fuction 的值
1、linear匀速
2、ease 速度为向下的抛物线；ease-in；ease-out； ease-in-out
3、常用的 cubic-bezier(n,n,n,n) ,可以做出很好的效果，如图所示：

具体代码如下：
css代码

html代码：

animation-direction
1、normal 默认值。动画按正常播放。
2、reverse 动画反向播放。
3、alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
4、alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

很多动画效果，根据基础变换出来，如何能够写出诸多效果，网上有许多demo，可以参考，熟练生巧就会了。

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

CSS 动画

上一篇：前端开发-CSS3动画实现焦点(图文轮播)图效果
下一篇：手把手教你H5实现工厂游戏的CSS动画效果「实践」

jq的动画、css3动画

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

这么牛逼的cursor功能，赶紧用起来

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」