原创

CSS-动画-transform-animation

1. transform用法

    （/*IE 9 以及更早的版本不支持 transform */）

    transform: rotate(45deg) translateX(20px);
    -ms-transform: rotate(45deg)translateX(20px);
    /* IE 9 */
    -moz-transform: rotate(45deg)translateX(20px);
    /* Firefox */
    -webkit-transform: rotate(45deg) translateX(20px);
    /* Safari 和 Chrome */
    -o-transform: rotate(45deg)translateX(20px);
    transition: all 1s ease;
    -webkit-transition: all 1s ease;

2. animation用法

（/*IE 9 以及更早的版本不支持 animation 需要position: relative;*/）

     position: relative;
    animation: mymove 5s infinite;
    -webkit-animation: mymove 5s infinite;
    /*Safari and Chrome*/


    @keyframes mymove {
        /*from {
            left: 0px;
        }
        to {
            left: 200px;
        }
        */
        0% {
            left: 0px;
        }
        100% {
            left: 200px;
        }
    }

    @-webkit-keyframes mymove
    /*Safari and Chrome 外围需要{}包裹一下*/
    {
        /*from {
            left: 0px;
        }
        to {
            left: 200px;
        }*/
        0% {
            left: 0px;
        }
        100% {
            left: 200px;
        }
    }
正文到此结束
所属分类：前端基础
  • 本文标签： CSS
  • 本文链接： https://code.jiangjiesheng.cn/article/70
  • 版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。
热门推荐
相关文章
说给你听

本文目录
    标签云
    Linux Java Spring Spring Boot 其他 MyBatis MySQL 前端 微信小程序 达梦数据库 PHP Aspose.Words ssh CSS vuejs 去哪儿网 小程序 安卓 Android jmeter 测试 数据库设计开发规范 JSP sharding-jdbc JavaScript ElasticSearch Kibana Jenkins mui 系统调优 后端 运维 C# AndriodStudio 顺风车 拼车 南京浦口到安庆桐城 SqlServer redis Jedis Druid 数据库 全栈开发 调优 沟通
    近期评论
    网站信息
    • 文章总数：330 篇
    • 标签总数：45 个
    • 分类总数：17 个
    • 留言数量：12 条
    • 在线人数：1人