zoukankan      html  css  js  c++  java
  • CSS3中transform,transition和animation的简单介绍和使用方法演示样例

    transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性。

    transition是一个属性。它是用来控制过渡效果的,由于用transform能够添加变换效果。而那个变换是瞬间突变。假设想让这个变化是平滑的、过渡型的。则要用transition来控制。设定要控制的属性和过渡的时间就可以。

    animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个參数制定想要加入的动画名称。执行时间。执行次数等等。

    /* Float using transition */
    .float {
        transition-property: transform;
        transition-duration: .3s;
    }
    .float:hover {
        transform: translateY(-5px);
    }


    /* Pulse using animation*/
    @keyframes pulse {
        25% {
            transform: scale(1.1);
        }
        75% {
            transform: scale(.9);
        }
    }
    .pulse { 
    .pulse:hover {
        animation-name: pulse;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
  • 相关阅读:
    方法参数个数最多不宜超过4个
    避免方法中使用大量局部变量
    JQuery学习备忘
    CSS学习备忘
    解析Path方法备忘
    获取差集合的一种实现思路
    前台JSP页面独立化
    requireJs的使用
    handlebar
    移动端h5<a>标签点击样式去除
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/6768977.html
Copyright © 2011-2022 走看看