1.transition,其作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。

transition 属性介绍:

transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如:

.trans {
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.trans:hover {
background-color: #486AAA;
color: #fff;
}

注意浏览器的兼容性。

2.transform ,指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西,拉伸,压缩,旋转,偏移。

 transform 属性介绍:

 

  • 旋转rotate

  • 扭曲skew

  • 缩放scale

  • 移动translate

  • 矩阵变形matrix

  以rotate为例,3D Transform 中 rotate 有三种方法,rotateX(angle) X轴旋转,rotateY(angle) Y轴旋转,rotateZ(angle) Z轴旋转

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

例如:

  

.trans_effect {
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
.trans_effect:hover {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}

注意浏览器的兼容性。

3.animation

 使用:

  

@-webkit-keyframes glow {
0% {
-webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
border-color: rgba(160, 179, 214, 0.5);
}
100% {
-webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
border-color: rgba(160, 179, 214, 1.0);
}
}
.anim_image {
padding:3px;
border:1px solid #beceeb;
background-color:white;
-moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
-webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
background-color:#f0f3f9;
-webkit-animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}

注意浏览器的兼容性

此案例演示效果:http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-7.html

4.transition 与 transform 综合使用案例(两图片轮流播放):

 

img{
width: 100px;
height:100px;
transition: all 1s ease-in-out ;
cursor: pointer;
} .img_top{
position: absolute;
transform: scale(0,0);
opacity:;
} .anim_box:hover .img_top{
opacity:;
transform: scale(1, 1);
} .anim_box:hover .img_bottom{
transform: scale(0,0);
}

html:

<div class="anim_box">
<img class="img_top" src="static/image/palm.jpg">
<img class="img_bottom" src="static/image/trees.jpg">
</div>

案例效果:http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-11.html

css 3 动画的更多相关文章

  1. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  2. Effeckt.css项目:CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  3. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  4. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  5. CSS波纹动画

    波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...

  6. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

  7. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  8. CSS帧动画

    CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...

  9. css keyframes动画属性设置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 关于 Dev中的GridControl 中 GridView 的 PopulateColumns() 方法

    最近使用Dev控件,Gridview绑定数据源后不能显示数据,于是在网上查询,说是使用PopulateColumns()方法,可以显示数据.试了一下,管用. 于是在所有更新数据源数据后,都用上了这句话 ...

  2. Nginx ssl证书部署

    查看当前安装的OpenSSL版本所支持的密码列表,可以使用下列命令:openssl ciphers 苹果ATS检测:https://www.qcloud.com/product/ssl 刚开始&quo ...

  3. Java Daemon 守护线程

    Java中可以通过Thread或ThreadGroup的setDaemon方法将线程设置为守护线程 当所有非守护线程退出后 守护线程将被杀死不在运行 .Net中可以通过设置IsBackground属性 ...

  4. jquery下拉菜单打开的同时,同行右边的图标变化

    1.用bootstrap的折叠面板时,右侧的三角图标随菜单下拉而旋转90°: html代码 <a class="advanced-option" data-toggle=&q ...

  5. CentOS6.5上源码安装MongoDB3.2.1

    1.环境准备: mkdir /home/mongodb #创建MongoDB程序存放目录 mkdir /data/mongodata -p #创建数据存放目录 mkdir /data/log/mong ...

  6. 8.31 js基础总结1

    JavaScript是一种脚本语言,由web浏览器进行解释和执行.它给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 将JavaScript应用到网页中常用的方法有两种,第 ...

  7. 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

    高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...

  8. AJAX - onreadystatechange

    [AJAX - onreadystatechange] 参考:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechang ...

  9. scala 学习之:list span 用法

    Pack consecutive duplicates of list elements into sublists. If a list contains repeated elements the ...

  10. 国内最给力五大免费VPN商家

    国内有很多提供免费VPN的商家,水平也是参差不齐,有的用心服务,为客户提供优质免费VPN线路,进而赢得客户的信任.有的则对免费线路敷衍了事,只对付费线路“尽职尽责”,从而流失大量潜在VIP客户. 笔者 ...