css动画

-webkit-transition: 属性(多个的话用,隔开) 时间 ease-in-out;
-moz-transition: 属性 时间 ease-in-out;
transition: 属性 时间 ease-in-out;

然后配合伪类一起来用

.move1 {
    color: #fff;
    display: block;
    width: 30px;
    height: 20px;
    margin: 10px auto;
    border-top: 2px solid #666;

    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.move1:hover {
    width: 400px;
}

当选到move1类名的标签 时,就会有动画效果啦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,883评论 0 4
  • 本文并非原创,属于摘抄性质,并有个人的加工。 一、过渡动画 过渡(transition)动画,就是从初始状态过渡到...
    前端xiyoki阅读 11,692评论 1 13
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • CSS 中的 transform,transition 和 animation 是分开的三部分内容,其中 tran...
    单纯的土豆阅读 734评论 0 4