{"action":"opened","issue":{"url":"https://api.github.com/repos/iuap-design/blog/issues/40","repository_url":"https://api.github.com/repos/iuap-design/blog","labels_url":"https://api.github.com/repos/iuap-design/blog/issues/40/labels{/name}","comments_url":"https://api.github.com/repos/iuap-design/blog/issues/40/comments","events_url":"https://api.github.com/repos/iuap-design/blog/issues/40/events","html_url":"https://github.com/iuap-design/blog/issues/40","id":164711996,"number":40,"title":"css3 transition 笔记","user":{"login":"ahua52","id":19704104,"avatar_url":"https://avatars.githubusercontent.com/u/19704104?v=3","gravatar_id":"","url":"https://api.github.com/users/ahua52","html_url":"https://github.com/ahua52","followers_url":"https://api.github.com/users/ahua52/followers","following_url":"https://api.github.com/users/ahua52/following{/other_user}","gists_url":"https://api.github.com/users/ahua52/gists{/gist_id}","starred_url":"https://api.github.com/users/ahua52/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ahua52/subscriptions","organizations_url":"https://api.github.com/users/ahua52/orgs","repos_url":"https://api.github.com/users/ahua52/repos","events_url":"https://api.github.com/users/ahua52/events{/privacy}","received_events_url":"https://api.github.com/users/ahua52/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-07-10T11:48:13Z","updated_at":"2016-07-10T11:48:13Z","closed_at":null,"body":"\r\n# transition 属性值\r\n\r\ncss 动画 transition是过渡的意思，元素从一种样式组件改变到另外一种效果\r\n\r\n- transition-prototype  需要过渡的属性，默认值all。必输\r\n- transition-during  持续时间，默认值0。 必输\r\n- transition-timing-function 速度曲线,默认值ease\r\n- transition-delay  多长时间后执行过渡，默认值0\r\n\r\n# transition-timing-function\r\ntransition 的另外三个值比较明了，唯独这个略显神秘。\r\n它的取值范围如下：\r\n - linear     匀速  （cubic-bezier(0,0,1,1)）\r\n - ease       匀加速-匀减速 （cubic-bezier(0.25,0.1,0.25,1)）\r\n - ease-in   匀加速 （ubic-bezier(0.42,0,1,1)）\r\n - ease-out 匀减速 （cubic-bezier(0,0,0.58,1)）\r\n -ease-in-out 加速-减速 （cubic-bezier(0.42,0,0.58,1)）\r\n - cubic-bezir(n,n,n,n)  n取值去0-1\r\n\r\nease-in-out 与 ease 很类似，只是速度曲线不一样，具体表现在贝塞尔值不同\r\n\r\n# 实例讲解\r\n```\r\n<style> \r\ndiv\r\n{\r\n      width:100px;\r\n      transition:width 2s;\r\n}\r\n\r\ndiv:hover\r\n{\r\n      width:300px;\r\n}\r\n</style>\r\n```\r\n当鼠标hover到div上 这个div的width花2s时间以ease的曲线延长到300px。\r\n\r\n# transition 可接受多个属性值\r\n```\r\n<style> \r\ndiv\r\n{\r\n      width:100px;\r\n      height:50px;\r\n      transition:width 2s,height 2s;\r\n}\r\n\r\ndiv:hover\r\n{\r\n      height: 100px;\r\n      width:300px;\r\n}\r\n</style>\r\n```\r\n# transform 属性\r\n```\r\n<style> \r\ndiv\r\n{\r\n     width:100px;\r\n     height:100px;\r\n     transition:width 2s, height 2s,transform 2s;\r\n}\r\n\r\ndiv:hover\r\n{\r\n       width:200px;\r\n       height:200px;\r\n       transform:rotate(180deg);\r\n}\r\n</style>\r\n\r\n```\r\ntransform 如width一样是属性，定义元素旋转缩放，移动和倾斜。\r\n\r\ntransform：transform-function\r\n\r\ntransform-function 取值参见与 http://www.w3school.com.cn/cssref/pr_transform.asp\r\n\r\n因transform 这个神奇的属性 transition可以轻松模拟许多有意思的动画\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"ahua52"}}