16个最好的CSS3过渡和动画教程

CSS3改变了许多旧的技术,使一切复杂的效果变得更容易。它有助于提高设计的功能,让你的网站设计更有影响和吸引力。CSS过渡和动画,具有更多强大的滤镜功能。他们帮助你制作更美丽和有趣的互动。这些影响有时候,令人印象深刻地徘徊或点击。所以今天我们列出了一些创新的CSS转换和动画技术。所有这些技术可以提高你的网站的整体外观,创造新颖和实际效果。请注意,这些技术也使用HTML5和JavaScript除了CSS3。

今天我们介绍的CSS3动画精选过渡功能的文章。CSS3是充满了实用的功能,其中一些是搜索不到的

Paperfold CSS

001

Paperfold CSS是所有隐藏的评论由Felix Niklas设计的折叠效果。它需要一个DOM元素,将其切成块,使它们像一个折叠纸的三维空间。有趣的效果对吗?

 

Animated popover of profile box

002

创建一个动画弹出菜单,CSS转换简介

 

CSS 3D Lighting Engine Photon

003

JavaScript库允许添加简约灯光效果的3D对象,利用WebKitCSSMatrix DOM元素。

 

CSS3 scroll effects

004

这是一个令人难以置信的许多不同的滚动效果,如冰壶,挥舞,翻转,飞库,扭曲和螺旋线,利用CSS3和JavaScript添加轻松的旋转功能

 

3D Thumbnail Hover Effects With CSS

005

顾名思义,这个可以让你创建一个3D缩略图悬停,使用CSS 3D效果转换。它的代码是相当长的但是效果真的很好

 

CSS3 bitmap graphics

006

Bitmap graphics呈现的CSS。没有图片,没有canvas,没有数据的URI,而且没有额外的标记。这些图形使用CSS渐变,大小适合的像素边界。

 

Maintaining CSS style states with ‘infinite’ transition delays

007

演示了如何让你查看移动角色周围的方向,并发现它始终保持其位置在你停止移动。它不使用任何JavaScript。这种效果是使用一个几乎无限的过渡延迟实现,使CSS规则不应该回到原来的状态。它会停留在一个过渡,当你按住按钮。

 

Beercamp: An Experiment With CSS 3D

008

在这里你可以得到一个实验CSS 3D弹出效果,这原来是很好的信息。它的创建是看到了限制的SVG和CSS 3D变换

 

Slide In Image Boxes

009

它允许盒“滑动”效应产生的当你的鼠标悬停在他们上面。这种效应增加了盒子的简单特性

 

Interactive CSS3 lighting effects

010

这些都是一些很酷的灯光效果与三维变换,CSS渐变和标志。您可以通过使用阴影框实现阴影效果和变换。

 

Animation on Apple’s page

011

你喜欢iPhone 4S在苹果官网的动画吗?如果是那样的话,你应该看看这里 John B. Hall解释页面上的CSS动画

 

Experimental animations for image transitions

012

在这里你可以得到关于实验的三维图像转换,使用CSS3动画和jQuery的细节。单独利用CSS3转换。

 

CSS 3-D clouds

013

这允许使用CSS3制作三维变换和一些JavaScript的云

 

Spin icons with CSS3

您可以创建旋转图标悬停在他们网站的影响采用变换和过渡

 

CSS3 dodecahedron

014

这是一个漂亮的十二面体实验。它可以利用CSS转换和一个小的Javascript代码

 

Covers: A JS / CSS Experiment

015

名称明确指出,这是一个实验。它可以让你创建一个音乐歌曲的封面,样式表和利用CSS3和JavaScript检测器!该产品是很酷的,你可以使用任何你想要的元素

 

Scroll the Z Axis with CSS 3D Transforms

在这里你可以学到很详细的步骤创建z-scroll效应。

 

原文:http://smashinghub.com/css3-transitions-and-animations.htm