视频教程:CSS3动画属性实用技巧教程


目前CSS3动画已经越来越流行,在一些网页专题的产品介绍页面,手机APP首屏展示页面,又或者只是一个按钮简单变形,都可以使用CSS3来实现,虽然动画简单,但却让静态枯燥无味的页面增加...
目前CSS3动画已经越来越流行,在一些网页专题的产品介绍页面,手机APP首屏展示页面,又或者只是一个按钮简单变形,都可以使用CSS3来实现,虽然动画简单,但却让静态枯燥无味的页面增加一点生气,更吸引用户,更加高端。


今天向大家讲解几个常用的CSS3动画属性,如:transition,animation,transform等属性,简单而实用,对于网页设计师和前端人员可以进来一起学习,下面是视频教程和一些在线示例。


为了方便大家更好的参与到接下来聊的话题,我们先把常用的动画属性跟大家一起过一下:


DEMO演示
  • 属性一 transition [示例演示]
  • 属性二 animation [示例演示,animation动效库]
  • 属性三 transform [示例演示]

接下来跟大家聊几个CSS3动画技巧:animation-delay的妙用,border颜色的妙用,border宽度的妙用:


DEMO演示
  • 技巧一 animation-delay设置成负值 [示例演示,练习操作]
  • 技巧二 设置border颜色 [示例演示,练习操作]
  • 技巧三 设置border宽度 [示例演示,练习操作]
再给大家介绍正圆运动,椭圆运动,弧形运动的实现方法:


DEMO演示
  • 技巧四 正圆运动 [示例演示]
  • 技巧五 椭圆运动 [示例演示]
  • 技巧六 弧形运动 [示例演示]

相关资料:
  1. transition使用细节:https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_transitions
  2. animation使用细节:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations
  3. 2d变换:http://www.w3cschool.cc/css3/css3-2dtransforms.html
  4. 3d变换:http://www.w3cschool.cc/css3/css3-3dtransforms.html
  5. animation-direction是否循环交替反向播放动画 http://www.w3cschool.cc/try/playit.php?f=playcss_animation-direction&preval=reverse

作者:冰果来源:75team

更多 animation 相关资讯

使用CSS3的step()生成的动画效果

使用CSS3的step()生成的动画效果

在线演示及下载 在这些DEMO中,将演示如何使用CSS3的step()来处理动画效果。运动的小车:.contain-car { animation: drive 4s steps(4, end) infinite;} .contain-car-2 { an

Magic CSS3 – 创建各种神奇的交互动画效果

Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.

jQuery+CSS3动画框架magic

jQuery+CSS3动画框架magic

源码下载 在线演示 Magic是一个有许多动画CSS3框架。简单易用,很多动画是跨浏览器兼容的。 代码: <link rel="stylesheet" href="yourpath/magic.css"> $('.

CSS教程-响应布局与平滑过渡

CSS教程-响应布局与平滑过渡

在本教程中,我们将创建一个响应式的全屏页面布局。这个页面是由导航模块+简单的内容面板构造而成的,出发导航条,内容区域会以平滑的方式滚动出现在相应位置。html代码:我们

CSS3制作莲花开放

CSS3制作莲花开放

这个效果我一拿到效果,让我惊叹了一翻,使用纯CSS3代码制作了一个莲花开放的效果,藤藤利用自己所掌握的CSS3知识将Niels Doorn使用js和CSS3制作的莲花开放的案例修改成了

CSS3 动画齿轮

在今天的课程中,我们使用CSS3制作一个动画齿轮效果,效果看起来非常漂亮。其中我使用了CSS3关键帧、动画和转换(旋转),为了得到这个结果,请注意:只有在火狐Firefox浏览器、谷歌Chrom

CSS3 Animation(上)

CSS3 Animation(上)

单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl

CSS3 Transitions(基础)

CSS3 Transitions(基础)

Step1:Link transitions 开头,我们做一些基础的练习:当指上文字的时候,改变其颜色! 代码如下: .case1 a{ color:#333; -webkit-transition:color 500ms ease-in;}.case1 a:

CSS3 Transitions, Transforms和Animation使用简介与应用展

CSS3 Transitions, Transforms和Animation使用简介与应用展

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云, 禁不住诱惑享

更多 css 相关资讯

9种CSS3炫酷图片预览展示动画特效

9种CSS3炫酷图片预览展示动画特效

这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形、平面展开等等非常酷的效果。 在线演示

20种炫酷CSS3按钮样式和鼠标滑过特效

20种炫酷CSS3按钮样式和鼠标滑过特效

这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信

基于css3的文字3D翻转特效

基于css3的文字3D翻转特效

一款基于css3的文字3D翻转特效。这款特效当鼠标经过文字的时候3D翻转显示阴影。效果图如下:在线预览基于css3的文字3D翻转特效.rar实现的代码。html代码:<div class="compone

CSS书写规范及顺序

CSS书写规范及顺序

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spaci

CSS3图片倒影技术实现及原理

CSS3图片倒影技术实现及原理

很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属

纯CSS实现Tooltip

tootip这个东西,真是什么地方都用得着,这段时间就不可避免的遇到了。 首先考虑一下tooltip的基本表现: 这应该是最简单的tooltip了。 首先是移动到某个元

十个实用但IE不支持的CSS属性

对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6。当然,这样的想法是非常病态的,马

整理 W3CSchool 常用的CSS属性列表

  近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O。   摘选自:http://www.w3cschool.com.cn/   表格最右列的数字标识支持的CSS

10款重量级CSS3的全新特效 实现绚丽前端动画效果

10款重量级CSS3的全新特效 实现绚丽前端动画效果

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面

Less里css表达式的写法

项目中用的grunt-contrib-less, 写了以下less代码 .mapfix{ position: fixed; top:10px; width: 430px; z-index: 100; background

更多 运动 相关资讯