{"action":"created","comment":{"url":"https://api.github.com/repos/xitu/gold-miner/pulls/comments/85638962","pull_request_review_id":6346282,"id":85638962,"diff_hunk":"@@ -1,59 +1,60 @@\n > * 原文地址：[Transition Effect with CSS Masks](http://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/)\n * 原文作者：[Robin Delaporte](http://tympanus.net/codrops/author/robin/)\n * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n-* 译者：\n+* 译者：[luoyaqifei](http://www.zengmingxia.com)\n * 校对者：\n \n-# Transition Effect with CSS Masks\n+# CSS 遮罩的过渡效果\n \n-A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental!\n+一份关于如何使用 CSS 遮罩来创建一些有趣的视觉滑动过渡的教程。高度可行！\n \n ![](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2016/09/CSSMaskTransition_800x600.jpg)\n \n \n-[View demo](http://tympanus.net/Tutorials/CSSMaskTransition/) [Download source](http://tympanus.net/Tutorials/CSSMaskTransition/CSSMaskTransition.zip)\n+[查看演示](http://tympanus.net/Tutorials/CSSMaskTransition/) [下载源码](http://tympanus.net/Tutorials/CSSMaskTransition/CSSMaskTransition.zip)\n \n-Today we’d like to show you how to create an intriguingly simple, yet eye-catching transition effect using [CSS Masks](http://tympanus.net/codrops/css_reference/mask/). Together with clipping, masking is another way of defining visibility and composite with an element. In the following tutorial we’ll show you how to apply the new properties for a modern transition effect on a simple slideshow. We’ll be applying animations utilizing the steps() timing function and move a mask PNG over an image to achieve an interesting transition effect.\n+今天我们想向你展示怎样创建一个有趣简单并且吸引眼球的过渡效果，采用的是 [CSS 遮罩](http://tympanus.net/codrops/css_reference/mask/) 。 与剪裁一样，遮罩是另一种定义可见性和与一个元素组合的方式。在接下来的教程中我们将展示给你的是：如何将一种现代过渡效果的新属性应用在简单的幻灯片上。我们使用 steps() 时间函数来应用动画，并将一张遮罩 PNG 移动到一张图片上方，来达到有趣的过渡效果。\n \n-**Attention:** Please keep in mind that this effect is **highly experimental** and only supported by some modern browsers (Chrome, Safari and Opera for now).\n+**注意：**请记住，这种效果是**具有高度试验性**的，只能被某些现代浏览器支持。\n \n ![](http://7xl8me.com1.z0.glb.clouddn.com/CSS%20Masks.png)\n \n-Keep in mind that Firefox has only partial support (it only supports inline SVG mask elements) so we’ll have a fallback for now. Hopefully, we can welcome support in all modern browsers very soon. Note that we’re adding [Modernizr](https://modernizr.com/download?cssmask-setclasses&q=css%20mask) to check for support.\n+记住 Firefox 只部分支持（它只支持行内 SVG 遮罩元素），因此我们现在需要有一个回退机制，很快我们就可以迎接所有现有浏览器的支持。注意我们加入 [Modernizr](https://modernizr.com/download?cssmask-setclasses&q=css%20mask) 来检查是否支持。\n \n-**So let’s get started!**\n+**所以让我们开始吧！**\n \n-## Creating the Mask Image\n \n-_In this tutorial we’ll be going through the first example (demo 1)._\n+## 创建遮罩图\n \n-For the mask transition effect to work, we will need an image that we’ll use to hide/show certain parts of our underlying image. That mask image will be a PNG with transparent parts on it. The PNG itself will be a sprite image and it looks as follows:\n+_ 我们将走进本教程的第一个例子（演示1）。_\n \n-![CSS Mask transition](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2016/09/sprite-example.jpg)\n+为了让遮罩过渡效果可行，我们需要一张用来隐藏／显示底层图片某些部分的图片。该遮罩图会是一张带有透明部分的 PNG 。该 PNG 自身是一张雪碧图，看上去像下图这样：","path":"TODO/transition-effect-with-css-masks.md","position":43,"original_position":43,"commit_id":"b666eaeb4f19ba80e7067fa7152d22df66e59b58","original_commit_id":"b666eaeb4f19ba80e7067fa7152d22df66e59b58","user":{"login":"Graning","id":13938277,"avatar_url":"https://avatars.githubusercontent.com/u/13938277?v=3","gravatar_id":"","url":"https://api.github.com/users/Graning","html_url":"https://github.com/Graning","followers_url":"https://api.github.com/users/Graning/followers","following_url":"https://api.github.com/users/Graning/following{/other_user}","gists_url":"https://api.github.com/users/Graning/gists{/gist_id}","starred_url":"https://api.github.com/users/Graning/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Graning/subscriptions","organizations_url":"https://api.github.com/users/Graning/orgs","repos_url":"https://api.github.com/users/Graning/repos","events_url":"https://api.github.com/users/Graning/events{/privacy}","received_events_url":"https://api.github.com/users/Graning/received_events","type":"User","site_admin":false},"body":"@xuzaixian   ","created_at":"2016-10-29T11:41:44Z","updated_at":"2016-10-29T11:41:44Z","html_url":"https://github.com/xitu/gold-miner/pull/851#discussion_r85638962","pull_request_url":"https://api.github.com/repos/xitu/gold-miner/pulls/851","_links":{"self":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/comments/85638962"},"html":{"href":"https://github.com/xitu/gold-miner/pull/851#discussion_r85638962"},"pull_request":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/851"}}},"pull_request":{"url":"https://api.github.com/repos/xitu/gold-miner/pulls/851","id":91234854,"html_url":"https://github.com/xitu/gold-miner/pull/851","diff_url":"https://github.com/xitu/gold-miner/pull/851.diff","patch_url":"https://github.com/xitu/gold-miner/pull/851.patch","issue_url":"https://api.github.com/repos/xitu/gold-miner/issues/851","number":851,"state":"open","locked":false,"title":"CSS 遮罩的过渡效果","user":{"login":"luoyaqifei","id":7871246,"avatar_url":"https://avatars.githubusercontent.com/u/7871246?v=3","gravatar_id":"","url":"https://api.github.com/users/luoyaqifei","html_url":"https://github.com/luoyaqifei","followers_url":"https://api.github.com/users/luoyaqifei/followers","following_url":"https://api.github.com/users/luoyaqifei/following{/other_user}","gists_url":"https://api.github.com/users/luoyaqifei/gists{/gist_id}","starred_url":"https://api.github.com/users/luoyaqifei/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/luoyaqifei/subscriptions","organizations_url":"https://api.github.com/users/luoyaqifei/orgs","repos_url":"https://api.github.com/users/luoyaqifei/repos","events_url":"https://api.github.com/users/luoyaqifei/events{/privacy}","received_events_url":"https://api.github.com/users/luoyaqifei/received_events","type":"User","site_admin":false},"body":"pr for #839\r\n第一次发pr，希望不要错啊。\r\n翻译初稿完成，校对者辛苦了。","created_at":"2016-10-27T16:21:10Z","updated_at":"2016-10-29T11:41:44Z","closed_at":null,"merged_at":null,"merge_commit_sha":"23d4bc7147f4cdbf3580c97c0ed5855fc724b500","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/xitu/gold-miner/pulls/851/commits","review_comments_url":"https://api.github.com/repos/xitu/gold-miner/pulls/851/comments","review_comment_url":"https://api.github.com/repos/xitu/gold-miner/pulls/comments{/number}","comments_url":"https://api.github.com/repos/xitu/gold-miner/issues/851/comments","statuses_url":"https://api.github.com/repos/xitu/gold-miner/statuses/b666eaeb4f19ba80e7067fa7152d22df66e59b58","head":{"label":"luoyaqifei:translate","ref":"translate","sha":"b666eaeb4f19ba80e7067fa7152d22df66e59b58","user":{"login":"luoyaqifei","id":7871246,"avatar_url":"https://avatars.githubusercontent.com/u/7871246?v=3","gravatar_id":"","url":"https://api.github.com/users/luoyaqifei","html_url":"https://github.com/luoyaqifei","followers_url":"https://api.github.com/users/luoyaqifei/followers","following_url":"https://api.github.com/users/luoyaqifei/following{/other_user}","gists_url":"https://api.github.com/users/luoyaqifei/gists{/gist_id}","starred_url":"https://api.github.com/users/luoyaqifei/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/luoyaqifei/subscriptions","organizations_url":"https://api.github.com/users/luoyaqifei/orgs","repos_url":"https://api.github.com/users/luoyaqifei/repos","events_url":"https://api.github.com/users/luoyaqifei/events{/privacy}","received_events_url":"https://api.github.com/users/luoyaqifei/received_events","type":"User","site_admin":false},"repo":{"id":71894050,"name":"gold-miner","full_name":"luoyaqifei/gold-miner","owner":{"login":"luoyaqifei","id":7871246,"avatar_url":"https://avatars.githubusercontent.com/u/7871246?v=3","gravatar_id":"","url":"https://api.github.com/users/luoyaqifei","html_url":"https://github.com/luoyaqifei","followers_url":"https://api.github.com/users/luoyaqifei/followers","following_url":"https://api.github.com/users/luoyaqifei/following{/other_user}","gists_url":"https://api.github.com/users/luoyaqifei/gists{/gist_id}","starred_url":"https://api.github.com/users/luoyaqifei/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/luoyaqifei/subscriptions","organizations_url":"https://api.github.com/users/luoyaqifei/orgs","repos_url":"https://api.github.com/users/luoyaqifei/repos","events_url":"https://api.github.com/users/luoyaqifei/events{/privacy}","received_events_url":"https://api.github.com/users/luoyaqifei/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/luoyaqifei/gold-miner","description":"掘金翻译计划，翻译掘金上优质的英文文章","fork":true,"url":"https://api.github.com/repos/luoyaqifei/gold-miner","forks_url":"https://api.github.com/repos/luoyaqifei/gold-miner/forks","keys_url":"https://api.github.com/repos/luoyaqifei/gold-miner/keys{/key_id}","collaborators_url":"https://api.github.com/repos/luoyaqifei/gold-miner/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/luoyaqifei/gold-miner/teams","hooks_url":"https://api.github.com/repos/luoyaqifei/gold-miner/hooks","issue_events_url":"https://api.github.com/repos/luoyaqifei/gold-miner/issues/events{/number}","events_url":"https://api.github.com/repos/luoyaqifei/gold-miner/events","assignees_url":"https://api.github.com/repos/luoyaqifei/gold-miner/assignees{/user}","branches_url":"https://api.github.com/repos/luoyaqifei/gold-miner/branches{/branch}","tags_url":"https://api.github.com/repos/luoyaqifei/gold-miner/tags","blobs_url":"https://api.github.com/repos/luoyaqifei/gold-miner/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/luoyaqifei/gold-miner/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/luoyaqifei/gold-miner/git/refs{/sha}","trees_url":"https://api.github.com/repos/luoyaqifei/gold-miner/git/trees{/sha}","statuses_url":"https://api.github.com/repos/luoyaqifei/gold-miner/statuses/{sha}","languages_url":"https://api.github.com/repos/luoyaqifei/gold-miner/languages","stargazers_url":"https://api.github.com/repos/luoyaqifei/gold-miner/stargazers","contributors_url":"https://api.github.com/repos/luoyaqifei/gold-miner/contributors","subscribers_url":"https://api.github.com/repos/luoyaqifei/gold-miner/subscribers","subscription_url":"https://api.github.com/repos/luoyaqifei/gold-miner/subscription","commits_url":"https://api.github.com/repos/luoyaqifei/gold-miner/commits{/sha}","git_commits_url":"https://api.github.com/repos/luoyaqifei/gold-miner/git/commits{/sha}","comments_url":"https://api.github.com/repos/luoyaqifei/gold-miner/comments{/number}","issue_comment_url":"https://api.github.com/repos/luoyaqifei/gold-miner/issues/comments{/number}","contents_url":"https://api.github.com/repos/luoyaqifei/gold-miner/contents/{+path}","compare_url":"https://api.github.com/repos/luoyaqifei/gold-miner/compare/{base}...{head}","merges_url":"https://api.github.com/repos/luoyaqifei/gold-miner/merges","archive_url":"https://api.github.com/repos/luoyaqifei/gold-miner/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/luoyaqifei/gold-miner/downloads","issues_url":"https://api.github.com/repos/luoyaqifei/gold-miner/issues{/number}","pulls_url":"https://api.github.com/repos/luoyaqifei/gold-miner/pulls{/number}","milestones_url":"https://api.github.com/repos/luoyaqifei/gold-miner/milestones{/number}","notifications_url":"https://api.github.com/repos/luoyaqifei/gold-miner/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/luoyaqifei/gold-miner/labels{/name}","releases_url":"https://api.github.com/repos/luoyaqifei/gold-miner/releases{/id}","deployments_url":"https://api.github.com/repos/luoyaqifei/gold-miner/deployments","created_at":"2016-10-25T12:20:08Z","updated_at":"2016-10-25T11:00:38Z","pushed_at":"2016-10-27T16:17:26Z","git_url":"git://github.com/luoyaqifei/gold-miner.git","ssh_url":"git@github.com:luoyaqifei/gold-miner.git","clone_url":"https://github.com/luoyaqifei/gold-miner.git","svn_url":"https://github.com/luoyaqifei/gold-miner","homepage":"http://gold.xitu.io","size":15860,"stargazers_count":0,"watchers_count":0,"language":null,"has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"xitu:master","ref":"master","sha":"6451d36d190a20fce37f34be7daac87f3f7f12e4","user":{"login":"xitu","id":10482599,"avatar_url":"https://avatars.githubusercontent.com/u/10482599?v=3","gravatar_id":"","url":"https://api.github.com/users/xitu","html_url":"https://github.com/xitu","followers_url":"https://api.github.com/users/xitu/followers","following_url":"https://api.github.com/users/xitu/following{/other_user}","gists_url":"https://api.github.com/users/xitu/gists{/gist_id}","starred_url":"https://api.github.com/users/xitu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xitu/subscriptions","organizations_url":"https://api.github.com/users/xitu/orgs","repos_url":"https://api.github.com/users/xitu/repos","events_url":"https://api.github.com/users/xitu/events{/privacy}","received_events_url":"https://api.github.com/users/xitu/received_events","type":"Organization","site_admin":false},"repo":{"id":45512989,"name":"gold-miner","full_name":"xitu/gold-miner","owner":{"login":"xitu","id":10482599,"avatar_url":"https://avatars.githubusercontent.com/u/10482599?v=3","gravatar_id":"","url":"https://api.github.com/users/xitu","html_url":"https://github.com/xitu","followers_url":"https://api.github.com/users/xitu/followers","following_url":"https://api.github.com/users/xitu/following{/other_user}","gists_url":"https://api.github.com/users/xitu/gists{/gist_id}","starred_url":"https://api.github.com/users/xitu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xitu/subscriptions","organizations_url":"https://api.github.com/users/xitu/orgs","repos_url":"https://api.github.com/users/xitu/repos","events_url":"https://api.github.com/users/xitu/events{/privacy}","received_events_url":"https://api.github.com/users/xitu/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/xitu/gold-miner","description":"掘金翻译计划，翻译掘金上优质的英文文章","fork":false,"url":"https://api.github.com/repos/xitu/gold-miner","forks_url":"https://api.github.com/repos/xitu/gold-miner/forks","keys_url":"https://api.github.com/repos/xitu/gold-miner/keys{/key_id}","collaborators_url":"https://api.github.com/repos/xitu/gold-miner/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/xitu/gold-miner/teams","hooks_url":"https://api.github.com/repos/xitu/gold-miner/hooks","issue_events_url":"https://api.github.com/repos/xitu/gold-miner/issues/events{/number}","events_url":"https://api.github.com/repos/xitu/gold-miner/events","assignees_url":"https://api.github.com/repos/xitu/gold-miner/assignees{/user}","branches_url":"https://api.github.com/repos/xitu/gold-miner/branches{/branch}","tags_url":"https://api.github.com/repos/xitu/gold-miner/tags","blobs_url":"https://api.github.com/repos/xitu/gold-miner/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/xitu/gold-miner/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/xitu/gold-miner/git/refs{/sha}","trees_url":"https://api.github.com/repos/xitu/gold-miner/git/trees{/sha}","statuses_url":"https://api.github.com/repos/xitu/gold-miner/statuses/{sha}","languages_url":"https://api.github.com/repos/xitu/gold-miner/languages","stargazers_url":"https://api.github.com/repos/xitu/gold-miner/stargazers","contributors_url":"https://api.github.com/repos/xitu/gold-miner/contributors","subscribers_url":"https://api.github.com/repos/xitu/gold-miner/subscribers","subscription_url":"https://api.github.com/repos/xitu/gold-miner/subscription","commits_url":"https://api.github.com/repos/xitu/gold-miner/commits{/sha}","git_commits_url":"https://api.github.com/repos/xitu/gold-miner/git/commits{/sha}","comments_url":"https://api.github.com/repos/xitu/gold-miner/comments{/number}","issue_comment_url":"https://api.github.com/repos/xitu/gold-miner/issues/comments{/number}","contents_url":"https://api.github.com/repos/xitu/gold-miner/contents/{+path}","compare_url":"https://api.github.com/repos/xitu/gold-miner/compare/{base}...{head}","merges_url":"https://api.github.com/repos/xitu/gold-miner/merges","archive_url":"https://api.github.com/repos/xitu/gold-miner/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/xitu/gold-miner/downloads","issues_url":"https://api.github.com/repos/xitu/gold-miner/issues{/number}","pulls_url":"https://api.github.com/repos/xitu/gold-miner/pulls{/number}","milestones_url":"https://api.github.com/repos/xitu/gold-miner/milestones{/number}","notifications_url":"https://api.github.com/repos/xitu/gold-miner/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/xitu/gold-miner/labels{/name}","releases_url":"https://api.github.com/repos/xitu/gold-miner/releases{/id}","deployments_url":"https://api.github.com/repos/xitu/gold-miner/deployments","created_at":"2015-11-04T03:29:13Z","updated_at":"2016-10-29T09:22:42Z","pushed_at":"2016-10-29T09:24:07Z","git_url":"git://github.com/xitu/gold-miner.git","ssh_url":"git@github.com:xitu/gold-miner.git","clone_url":"https://github.com/xitu/gold-miner.git","svn_url":"https://github.com/xitu/gold-miner","homepage":"http://gold.xitu.io","size":16803,"stargazers_count":4532,"watchers_count":4532,"language":null,"has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":818,"mirror_url":null,"open_issues_count":29,"forks":818,"open_issues":29,"watchers":4532,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/851"},"html":{"href":"https://github.com/xitu/gold-miner/pull/851"},"issue":{"href":"https://api.github.com/repos/xitu/gold-miner/issues/851"},"comments":{"href":"https://api.github.com/repos/xitu/gold-miner/issues/851/comments"},"review_comments":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/851/comments"},"review_comment":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/851/commits"},"statuses":{"href":"https://api.github.com/repos/xitu/gold-miner/statuses/b666eaeb4f19ba80e7067fa7152d22df66e59b58"}}}}
{"actor":{"display_login":"Graning"}}