有关动画的总结

1)如果按照从本身位置开始移动,则translate3d使用百分比,如0%~300%;如果按照页面中的位置尺寸移动,则使用具体的px值。比如该元素开始在100px处,使用动画

translate3d(0, 15px, 0),则该元素先移动到15px处;(注意该元素要设置position:absloute;)
@include keyframes(arrow-move, webkit){
    0% {
      opacity: 1;
      @include transform(translate3d(0, 0, 0));
      visibility: visible;
    }
    50% {
      opacity: 1;
      @include transform(translate3d(0, 150%, 0));/*百分比是相对本身尺寸而言的*/
    }
    100% {
      opacity: 1;
      @include transform(translate3d(0, 300%, 0));/*里面的参数是移动到哪个长度位置,而不是移动的长度*/
    }
};

2)

.cloud{
    width:187px;
    height:92px;
    background: url(‘./i/cloud.png‘);
    &.fd-move{/*&.fa-move相当于和cloud同等级别的类,一般用于js中addClass作用*/
        /*infinite动画无限运动,或者设置为n,n为运动的次数*/
            @include animation(arrow-move 1s infinite linear);
        }
}

3)使用scss中段样式的方法来化简css

@mixin center{
    background:red;
    border:2px solid green;
}
.line{
        position: absolute;
        width: 100%;
        height: 10px;
        top: 368px;
        @include center;
    }

.ceshi{
        position: absolute;
        width: 100%;
        height: 100px;
        top: 400px;
        @include center;
}

这样相当于line和ceshi中都引入了样式center

4)

//文字动画
@include keyframes(txt-move-sr, webkit){/*该div的高度由小到大*/
    0% {
      height: 0;
    }
    100% {
      height: 1.55rem;
    }
};
时间: 2024-10-03 05:07:01

有关动画的总结的相关文章

*C#(WPF)--矩阵拖动和矩阵动画(拖动展开,不足动画效果)

最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行的,这个工具条主要功能是:一个工具条,可进行拖拉.可进行拖拉展开,可在拖动之后不足展开并反向继续展开剩下的部分: 一.[拖动]   拖动的核心代码是通过矩阵进行定位和拖动的,定位是以父容器为模板的.以下是核心代码(及效果图): 1 /// <summary> 2 /// 这里TitleBar代指最

android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状态栏等源码

Android精选源码 轻量级底部导航栏 android手机卫士源码 android实现高仿今日头条源码 一个用Kotlin写的简单漫画App源码 android吐槽项目完整源码 实现可以滑动文字逐渐变色的TabLayout android实现将app隐藏加密功能的源码 android实现横向滚动的卡片堆叠布局 android仿支付宝的咻咻动画源码 android状态栏和沉浸式导航栏管理源码 Android优质博客 从BaseActivity与BaseFragment的封装谈起 这篇博客主要是从

如何解决IOS 动画中 Autolayout 与View Transforms的冲突

IOS 的动画放大与缩小,并非按照找它的中心点放大和缩小,而是左上角 .我分析了下原来是Autolayout 与View Transforms的冲突造成的. - (void) addSubviewWithZoomInAnimation:(UIView*)view duration:(float)secs option:(UIViewAnimationOptions)option { // first reduce the view to 1/100th of its original dimen

JS 实现无缝滚动动画原理(初学者入)

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码:https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML ps: 上面和下面的滚动进度是一致的,上面红色框是为了演

U3D帧动画的制作

1.打开动画编辑器(动画制作器!)windows标签下的Animation 2.点击新建一个动画,保存后进入动画编辑状态.注意新建后创建一个动画和控制器(animator Contrller),同时为当前物体添加一个animator组件. 3.选择添加property,可以选择让动画改变哪些参数. 本例中制作一个窗口打开和关闭的简单动画.通过缩放窗口大小来控制打开关闭的动画.所以添加一个Scale的参数. 4.先制作一个关闭的动画:第一帧的时候控制scale都为1,也就是正常大小.60帧的时候控

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

HTML5 CSS3 诱人的实例: 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

angular 动画

ngAnimate 做了什么? ngAnimate 模型可以添加或移除 class . ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画. AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-swit

css动画效果

1.2D,3D转换 -1.通过2D,3D转换,我们能够对元素进行移动,缩放,转动,拉长,或拉伸. 转换是使元素改变形状,尺寸和位置的一种效果. 可以使用2D或者3D转换来转换元素. -2.2D(transform)转换方法 1.translate(x,y)移动,第二个参数未提供时默认为0 2.rotate(xdeg)旋转 3.scale(x,y)缩放 4.skew(xdeg,ydeg)倾斜,第二个参数未提供时默认为0 -3.3D转换方法 1.rotateX() 2.rotateY() <!DOC

Android攻城狮基础动画

Android基础动画 1. Tween Animation 变换动画 2. Frame Animation 帧动画 3. Layout Animation 布局动画 4. Property Animation 属性动画 Tween Animation(变换动画)在Android中又被分为四种: Alpha:渐变透明度动画 Scale:渐变尺寸缩放动画 Translate:位置移动动画 Rotate:旋转动画 Tween Animation共同属性: 1. Duration:动画持续时间(单位: