css3 transition effect(其它效果)
来源:互联网 发布:mac系统版本更新 编辑:程序博客网 时间:2024/06/05 07:23
整理了一些其它动画,用的模板为flip模板,只不过CSS3不同
/***************** 淡入淡出 ********************/.effect5 .back { -webkit-transform: rotate3d(1,0,0,0);}.effect5.show .front{-webkit-animation: effect5Front 0.6s linear forwards;}@-webkit-keyframes effect5Front{0% { opacity: 1; }100% { opacity: 0; }}/***************** 向左边推入 ********************/.transition.effect6 { overflow: hidden; }.effect6.show .front,.effect6.show .back{-webkit-animation-duration: 0.4s;-webkit-animation-timing-function: ease-out;-webkit-animation-fill-mode: forwards;}.effect6.show .front{-webkit-animation-name: effect6Front;}.effect6.show .back {-webkit-animation-name: effect6Back;}@-webkit-keyframes effect6Front{0% { -webkit-transform: translateX(0); }100% { -webkit-transform: translateX(-100%); }}@-webkit-keyframes effect6Back{0% { -webkit-transform: translateX(100%); }100% { -webkit-transform: translateX(0px); }}/***************** 从某个角落盖上原来的图片 ********************/.effect7 .front{ z-index: 1; }.effect7 .back{ z-index: 2; }.effect7.show .back{-webkit-animation: effect7Back 0.4s ease-out forwards;}@-webkit-keyframes effect7Back{0% { -webkit-transform: rotate(40deg) scale(1.5) translate(200px,10px); opacity: 0; }100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }}/***************** 插扑克牌效果1 ********************/.effect8 .back { -webkit-transform: rotate3d(1,0,0,0);}.effect8 .front { z-index: 1;}.effect8 .back { z-index: 1;}.effect8.show .front{-webkit-animation: effect8Front 0.8s ease-in-out forwards;}@-webkit-keyframes effect8Front{0% { -webkit-transform: translateX(0); z-index: 3;}50% { -webkit-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}51% { z-index: 1;}100% { -webkit-transform: rotateZ(0deg) translateX(0px); z-index: 1;}}/***************** 插扑克牌效果2 ********************/.effect9 .back { -webkit-transform: rotate3d(1,0,0,0);}.effect9.show .front,.effect9.show .back{-webkit-animation-duration: 0.8s;-webkit-animation-timing-function: ease-in-out;-webkit-animation-fill-mode: forwards;-webkit-transform-origin: 0% 100%;}.effect9.show .front{-webkit-animation-name: effect9Front;}.effect9.show .back {-webkit-animation-name: effect9Back;}@-webkit-keyframes effect9Front{0% { z-index: 3;}50% { -webkit-transform: rotateZ(-75deg); z-index: 3;}51% { z-index: 1;}100% { -webkit-transform: rotateZ(0deg); z-index: 1;}}@-webkit-keyframes effect9Back{0% { z-index: 1;}50% { -webkit-transform: rotateZ(20deg); z-index: 1;}51% { z-index: 3;}100% { -webkit-transform: rotateZ(0deg); z-index: 3;}}/***************** 淡出效果2 ********************/.effect10 .back { -webkit-transform: rotate3d(1,0,0,0);}.effect10.show .front{-webkit-animation: effect10Front 0.4s ease-in-out forwards;}@-webkit-keyframes effect10Front{0% { opacity:1; }100% { -webkit-transform: rotateZ(3deg) scale(1.5); opacity:0; }}/***************** effect11 ********************/.effect11 .back { -webkit-transform: rotate3d(1,0,0,0);}.effect11.show .front{-webkit-transform-origin: 0% 100%;}.effect11.show .front{-webkit-animation: effect11Front 1s ease-in-out forwards;}@-webkit-keyframes effect11Front{0% { z-index: 3; -webkit-animation-timing-function : ease-in }20% { -webkit-transform: rotateZ(180deg); z-index: 3;-webkit-animation-timing-function : ease-out }21% { z-index: 1; }40% { -webkit-transform: rotateZ(370deg); z-index: 1; }60% { -webkit-transform: rotateZ(356deg); z-index: 1; }80% { -webkit-transform: rotateZ(360deg); z-index: 1; }95% { -webkit-transform: rotateZ(359deg); z-index: 1; }100% { -webkit-transform: rotateZ(360deg); z-index: 1; }}/***************** 中心点扩散显示(mask) ********************/.effect12 .back{ -webkit-transform: rotate3d(1,0,0,0);}.effect12 .back {-webkit-mask-image: url(../../assets/circle-mask.png);-webkit-mask-repeat: no-repeat;-webkit-mask-position: 50% 50%;-webkit-mask-size: 1500px;-webkit-animation-duration: 1s;}.effect12.show .back{-webkit-animation-name: iris;z-index:3;}@-webkit-keyframes iris {0% { -webkit-mask-size: 0; -webkit-animation-timing-function: ease-in-out; }100% { -webkit-mask-size: 1500px; }}
- css3 transition effect(其它效果)
- css3 transition effect(Flip翻转效果)
- Css3 Transition动画效果
- CSS3 Transition 动画效果
- css3 transition效果
- css3 transition uncover (揭开效果)
- css3 transition unfold(折叠效果)
- 详解CSS3 Transition动画效果
- css3的transition 过渡效果
- CSS3 过渡效果transition
- css3动画效果transform transition
- CSS3实现过渡效果 (transition)
- css3的transition效果和transfor效果
- css3 transition split(分裂旋转效果)
- css3 transition cube(立方体翻转效果)
- CSS3 transition 属性过渡效果 详解
- css3 transform transition 实现照片墙效果
- CSS3 transition属性和Hover效果
- MySql 随机读取数据
- windows 32位程序编译成64位
- 解决多个实体类同名时,Hibernate会报异常
- ubuntu中关闭图形界面
- Linux 系统安全设置
- css3 transition effect(其它效果)
- Selenium2.0介绍--Selenium Grid,并行启动多个浏览器.
- RSA 公钥加密算法
- IOS 用封装API AsyncSocket进行网络通信
- Android binder机制分析-以MediaPlayer为例子
- C++文件操作
- 伊辛模型
- 手机屏幕分辨率
- [转载]在Windows Azure Store上购买第三方服务