
Spanish: 
Soy Kent, especialista
en Google Web Designer.
Voy a editar el fotograma clave
de una animación en el panel CSS.
Para empezar, creo un archivo vacío
le pongo nombre
y acepto los ajustes predeterminados.
Ahora creo una animación simple
activo la herramienta de elemento
y el modificador div
dibujo un rectángulo
y lo pinto rojo.
En la línea de tiempo
hago clic derecho en 1 s
y elijo un fotograma clave.
Activo la herramienta de selección
y pulso Mayús y flecha varias veces
para cambiar la posición.
Al mover la línea de tiempo
veo la animación.
Antes, para editar manualmente
iba a Código
y usaba una regla @keyframes.
Ahora, lo hago
en la Vista de diseño con el panel CSS.

Italian: 
Salve! Sono Kent,
l'esperto di creatività
del team di Google Web Designer.
Oggi vedremo come modificare il fotogramma
chiave dell'animazione nel riquadro CSS.
Inizio creando un nuovo file vuoto,
gli assegno un nome e accetto
le altre impostazioni predefinite.
Poi creo una semplice animazione.
Seleziono lo strumento Elemento
e il modificatore Div,
quindi disegno un rettangolo
e applico il colore rosso.
Nella sequenza temporale, 
faccio clic con il pulsante destro
in corrispondenza di 1 secondo
e inserisco un fotogramma chiave;
passo allo strumento Selezione,
e premo MAIUSC
e il tasto freccia più volte
per cambiare la posizione.
Ora, scorrendo la sequenza temporale,
vedo l'animazione.
Prima, occorreva apportare
questa modifica manualmente
nella Vista codice
cambiando la regola @keyframes.
Ora si può fare nella Vista struttura
mediante il riquadro CSS

Japanese: 
こんにちは Kentです
Google Web Designerチームの
クリエイティブ スペシャリストです
本日はCSSパネルでアニメーション
キーフレームを編集する方法をご紹介します
まず新しいファイルを作成します
名前を入力し
他のデフォルト設定はそのままにします
次に単純なアニメーションを作成します
要素ツールでdivを指定し
長方形を描いて色は赤にします
タイムラインで1秒のところを右クリックし
キーフレームを挿入します
選択ツールに切り替えて
矢印キーを動かして位置を変えていきます
これでタイムラインをスクラブすると
アニメーションを確認できます
以前は この作業を手動で行うには
コードビューに切り替えて
こちらの@keyframesルールを
表示する必要がありました
今では同じことがCSSパネルの
デザインビューでできるようになりました

Dutch: 
Hallo, mijn naam is Kent.
Ik ben de creative specialist
in het Google Web Designer-team.
Ik wil laten zien hoe je sleutelframes in
animaties bewerkt in het css-deelvenster.
Ik begin met een leeg bestand.
Ik geef het een naam en accepteer
de andere standaardinstellingen.
Nu maak ik een eenvoudige animatie.
Met de Element-tool en de
Div-modifier geselecteerd
teken ik een rechthoek,
die ik rood inkleur.
In de tijdlijn klik ik met
rechts bij één seconde
om een sleutelframe in te voegen.
Dan pak ik de Selectie-tool
en druk ik een paar keer op Shift+
pijltoets om de positie te wijzigen.
Als ik nu de tijdlijn doorloop,
zie ik de animatie.
Als je dit vroeger handmatig 
wilde bewerken,
ging je naar de Codeweergave.
Hier ziet u een @keyframes-regel.
Nu kunt u hetzelfde doen in de
Ontwerpweergave met het css-deelvenster.

Turkish: 
KENT: Merhaba, ben Kent.
Google Web Designer ekibinde
reklam öğesi uzmanıyım.
Bu videoda, CSS panelinde animasyon
karesi düzenlemeyi göstereceğim.
Boş bir dosya oluşturarak başlıyorum.
Sadece bir isim verip varsayılan
ayarları olduğu gibi bırakıyorum.
Şimdi basit bir animasyon oluşturacağım.
Öğe aracı ve div değiştiricisi seçiliyken
Bir dikdörtgen çizip kırmızıya boyuyorum.
Zaman çizelgesinde
birinci saniyeye sağ tıklayıp
Animasyon karesini ekliyorum
Ardından seçim aracına geçerek
Shift + Ok tuşlarına birkaç kez basıp
konumu değiştiriyorum.
Zaman çizelgesini kaydırdığımda
animasyon görünüyor.
Önceden bunu elle düzenlemek istediğinizde
kod görünümüne
geçmeniz gerekiyordu.
Burada @keyframes kuralını görebilirsiniz.
Artık aynı işi CSS panelini kullanarak
tasarım görünümden yapabilirsiniz.

Chinese: 
大家好，我叫Kent
我是来自Google Web Designer团队的
广告专家
我想给大家展示一下
如何在CSS面板中编辑动画关键帧
首先我要新建一个空白文件
给它指定一个名字并接受其他默认设置
现在创建一个简单动画
选中元素工具和DIV修饰工具
画一个长方形，然后涂成红色
在时间轴中，右键点击1秒的位置
插入关键帧
然后切换到选择工具
按几次箭头键来更改位置
现在，当我挪动时间轴时
就会看到动画效果
以前，如果您希望手动编辑
就需要切换到代码视图
您可以在此处看到@keyframes规则
现在您可以使用CSS面板
在设计视图中完成相同的操作

Thai: 
KENT: สวัสดีครับ ผมชื่อ Kent
ผู้เชี่ยวชาญด้านงาน
ครีเอทีฟ
ในทีม Google Web Designer
ผมจะมาแสดงการตัดต่อคีย์เฟรม
ภาพเคลื่อนไหวในแผง CSS
เริ่มด้วยการสร้างไฟล์เปล่าขึ้นมาใหม่
ตั้งชื่อ และยอมรับการตั้งค่าเริ่มต้นอื่นๆ
ตอนนี้ผมจะสร้างภาพเคลื่อนไหวง่ายๆ
เอาล่ะ เมื่อเลือกเครื่องมือองค์ประกอบ
และตัวแก้ไข div แล้ว
ผมจะวาดสี่เหลี่ยมผืนผ้า และกำหนด
สีเป็นสีแดง
ในไทม์ไลน์ ผมจะคลิกขวาที่ 1 วินาที
เพื่อแทรกคีย์เฟรม
เปลี่ยนไปใช้
เครื่องมือเลือก
และกดปุ่ม Shift พร้อมลูกศร 2-3 ครั้ง
เพื่อเปลี่ยนตำแหน่ง
ตอนนี้เมื่อผมสครับไทม์ไลน์
ก็จะเห็นภาพเคลื่อนไหว
ก่อนหน้านี้ หากคุณต้องการตัดต่อด้วยมือ
ก็ต้องเปลี่ยนไปใช้มุมมองโค้ด
และคุณจะเห็นกฎ @keyframes ที่นี่
ตอนนี้คุณจะทำแบบเดียวกันในมุมมอง
การออกแบบ โดยใช้แผง CSS

Russian: 
Привет! Меня зовут Кент.
Я специалист по креативам
Google Web Designer.
Давайте посмотрим, как изменять
ключевые кадры анимации на панели CSS.
Для начала создадим пустой файл.
Присвоим ему название
и оставим настройки по умолчанию.
Теперь создадим простую анимацию.
Выберем инструмент
"Элемент" с модификатором DIV,
нарисуем прямоугольник
и окрасим его в красный цвет.
Нажмем правой кнопкой мыши
на отметку "1с" временной шкалы,
чтобы добавить ключевой кадр.
Выберем инструмент "Выделение"
и переместим прямоугольник, нажав
Shift + стрелка влево несколько раз.
Теперь при прокрутке временной
шкалы мы будем видеть анимацию.
Раньше это нужно было делать вручную
в режиме "Код"
с помощью правил @keyframes.
Теперь это можно делать
в режиме "Макет" с помощью панели CSS,

Chinese: 
嗨，我是 Kent
我是 Google Web Designer 小組的
廣告素材專家
今天將示範如何在 CSS 面板中
編輯動畫主要畫面格
首先，新建一個空的檔案
為檔案命名
並接受其他預設設定
然後我要建立簡單的動畫
以目前選取的元素工具和 div 修飾符
畫一個長方形並塗上紅色
然後在時間軸上
1 秒的地方按滑鼠右鍵
加入主要畫面格
接著切換至選取工具
利用箭頭鍵來改變位置
這樣一來，只要拖曳時間軸
就能看見動畫
以前如果想手動編輯動畫
必須切換至程式碼檢視畫面
在 @keyframes 這裡修改規則
現在你可以在設計檢視中
使用 CSS 面板完成這項工作

French: 
Bonjour, je m'appelle Kent
et je suis spécialiste des créations
pour Google Web Designer.
Voici comment modifier les images clés
d'une animation dans le panneau "CSS".
Je crée un fichier vierge,
je lui attribue un nom
et j'accepte les paramètres par défaut.
Je crée ensuite une animation simple.
Avec l'outil d'élément,
je sélectionne le modificateur DIV,
je dessine un rectangle
et je le colorie en rouge.
Dans la timeline,
je fais un clic droit à 1 seconde
pour insérer une image clé.
Je passe à l'outil de sélection
et j'appuie sur Maj+flèches
plusieurs fois pour changer la position.
Je vois maintenant l'animation
lorsque je déplace la timeline.
Avant, pour effectuer
cette modification manuellement,
il fallait passer en vue Code,
et vous voyez la règle @keyframes ici.
C'est maintenant possible
dans la vue Conception, via le panneau "CSS".

English: 
KENT: hello my name is Kent.
I'm the creative specialist
on the Google Web Designer team
and I'd like to show animation
keyframe editing in the CSS panel
I'll start by creating a new blank file
I'll give it a name and accept the other default settings
Now I'll create a simple animation
so with the element tool and div modifier selected
I'll draw
a rectangle and color it red
In the timeline I'll right click at one second
to insert a keyframe
then switch to the selection tool
and shift arrow key a few
times to change the position
Now when I scrub the timeline I'll see the
animation
Previously if you wanted to edit this by hand
you'd switch to code view
and you can see an @keyframes rule here
Now you can do the same thing
in design view using the CSS panel

Polish: 
Cześć, mam na imię Kent
i jestem specjalistą ds. kreacji
w zespole Google Web Designera.
Pokażę Wam, jak edytować
klatkę kluczową animacji w panelu CSS.
Zacznę od utworzenia nowego pustego pliku.
Nadam mu nazwę
i zaakceptuję ustawienia domyślne.
Teraz utworzę prostą animację.
Korzystając z narzędzia
Element i modyfikatora div,
narysuję prostokąt
i pokoloruję go na czerwono.
Kliknę prawym przyciskiem myszy
oś czasu na wysokości jednej sekundy,
by wstawić klatkę kluczową.
Użyję narzędzia do zaznaczania
i przy wciśniętym klawiszu Shift
nacisnę kilka razy klawisz strzałki,
by zmienić położenie klatki.
Gdy przewinę oś czasu,
zobaczę teraz animację.
Wcześniej można było
edytować klatkę ręcznie
jedynie po przejściu do widoku kodu
i użyciu reguł @keyframes.
Teraz można zrobić to samo
w widoku projektu przy użyciu panelu CSS.

German: 
Hallo, ich bin Kent.
Ich bin Creative Specialist
im Google Web Designer-Team.
In diesem Video zeige ich Ihnen,
wie Sie im Steuerfeld "CSS"
Animations-Keyframes bearbeiten.
Zuerst erstelle ich eine leere Datei.
Ich benenne sie und akzeptiere
die anderen Standardeinstellungen.
Jetzt erstelle ich eine einfache Animation.
Dazu wähle ich das Elementtool
und die Option "Div-Element" aus,
zeichne dann ein
Rechteck und färbe es rot.
Nun klicke ich in der Zeitachse bei
1 Sekunde auf die rechte Maustaste,
um einen Keyframe einzufügen.
Dann wechsle ich zum Auswahltool
und drücke mehrmals bei
gedrückter Umschalttaste die Pfeiltaste.
Beim Scrubben in der Zeitachse
wird jetzt die Animation angezeigt.
Um dies manuell zu ändern, musste
man früher zur Codeansicht wechseln.
Hier gibt es eine "@keyframes"-Regel.
Diese Änderungen können jetzt unter "CSS"
in der Designansicht vorgenommen werden.

Portuguese: 
Olá, sou Kent, especialista em criativos
da equipe do Google Web Designer,
e vou mostrar como editar o frame-chave
de animação no painel CSS.
Vou criar um novo arquivo em branco,
dar um nome a ele e aceitar
as outras configurações padrão.
Agora vou criar uma animação simples.
Usando a ferramenta de inspeção
com modificador de div selecionado,
Vou desenhar um retângulo
e pintá-lo de vermelho.
Na timeline,
com o botão direito, clico em "1 s"
para inserir um frame-chave.
Depois, pego a ferramenta de seleção
e mudo a posição clicando algumas vezes
clicando em shift + seta.
Agora, ao mexer na timeline,
vejo a animação.
Antes, para editar
essa animação manualmente,
seria preciso mudar
a visualização do código
para poder ver uma regra @keyframe aqui.
Agora fazemos o mesmo na visualização
de design com o painel CSS.

Korean: 
안녕하세요
저는 Google Web Designer팀의
광고 소재 전문가인
Kent라고 합니다
이번 시간에는 CSS 패널에서 애니메이션
키프레임을 편집하는 방법을 알아보겠습니다
먼저 새로운 빈 파일을 만듭니다
이름을 지정하고
기본 설정은 그대로 두겠습니다
이제 간단한 애니메이션을 만들어 보겠습니다
요소 도구와 Div 수정 도구를 선택한 다음
직사각형을 그린 후 빨간색으로 칠합니다
타임라인에서 1초 지점을
마우스 오른쪽 버튼으로 클릭하여
키프레임을 삽입합니다
그런 다음 선택 도구로 전환하고
Shift 키와 화살표 키를 누르면서
위치를 조정합니다
타임라인을 따라 드래그하면
애니메이션처럼 보입니다
예전에 수동으로 편집할 때는
코드 보기로 전환해서
키프레임 규칙을 찾아야 했습니다
이제는 디자인 보기에서 CSS 패널을
이용해 같은 작업을 할 수 있습니다

Italian: 
dove troviamo le stesse regole.
È sempre possibile modificare l'animazione
nella sequenza temporale,
è solo un metodo alternativo di lavorare.
Ad esempio, posso inserire
nuovi fotogrammi chiave,
modificarne la posizione,
le proprietà
e vedere questi aggiornamenti
nella sequenza temporale.
Questo metodo è utile se si hanno
diversi fotogrammi chiave
definiti in valori percentuali
perché si possono inserire i valori
esatti nel riquadro CSS
anziché cercare di individuarli
nella sequenza temporale.
Nel riquadro CSS è anche possibile
eliminare i fotogrammi chiave
evidenziando la percentuale
e cancellandola.
Infine è anche possibile
aggiungere nuove proprietà all'animazione.
Quindi, nel primo fotogramma chiave
aggiungo la proprietà "opacity"
e la imposto su 0;
come si vede il fotogramma chiave finale
è aggiornato automaticamente
e la modifica è rispecchiata nello stage.
Ora visualizzo un'anteprima
per controllare
che l'animazione desiderata sia visibile.
Abbiamo dunque visto
un altro modo di modificare

Chinese: 
这里显示了相同的规则
您仍然可以在时间轴中做出动画更改
但这仅仅提供了另一种工作方式
例如，我可以插入新的关键帧
编辑地理位置
编辑属性
还能查看这些更改在时间轴中的更新情况
如果您有一整套按百分比指定的关键帧
这项功能就非常有用
也就是说
您可以在CSS面板中精确输入这些值
而不是凭眼力在时间轴中仔细搜寻
您还可以选中并删除百分比
在CSS面板中移除关键帧
最后还有一个功能
您还可以新增要应用动画效果的属性
我会在第一个关键帧上
添加属性不透明度，将其设置为0
您会看到最后一帧自动更新了
并体现在了场景中
现在，开始预览
我看到了预期的动画
也就是说您可以通过另一种方式
使用CSS面板

Russian: 
применяя те же правила.
Редактирование на
временной шкале все ещё доступно,
но можно использовать и новый способ.
Например, вставим ключевой кадр,
а затем изменим расположение
и свойства.
Наши изменения
отразились на временной шкале.
Это удобно при работе
с набором ключевых кадров,
указанных в процентах,
так как можно задать их
точные значения на панели CSS,
а не искать на временной шкале.
На панели CSS можно также удалить
ключевой кадр, выделив
и удалив его процентное значение.
И наконец,
вы можете добавлять
анимированные свойства.
Зададим нулевую прозрачность
для первого ключевого кадра.
Мы видим, что последний
кадр изменился автоматически,
и это отразилось на временной шкале.
Запустим предварительный просмотр,
чтобы проверить работу анимации.
Итак, теперь можно
управлять анимацией ключевых кадров

Japanese: 
同じルールがここにあります
タイムラインでも
アニメーションを変更できますが
ここでも別の方法で変更できます
たとえば新しいキーフレームを挿入し
位置を編集し
プロパティを編集すると
変更内容がタイムラインに反映されます
この方法は一連のキーフレームを
百分率で指定している場合に
便利です
CSSパネルで正確な値を入力すれば
タイムラインで目分量で指定せずに済みます
CSSパネルでキーフレームを削除するには
百分率の値を選択して削除します
アニメーション表示する
新しいプロパティも追加できます
最初のキーフレームに
プロパティの不透明度を追加して
値をゼロとします
すると最後のキーフレームが自動更新され
ステージに反映されます
思ったとおりのアニメーションに
なっているかどうか
プレビューで確認します
CSSパネルを使って
キーフレームアニメーションを
オーサリングする

Dutch: 
Hier zijn diezelfde regels.
Animaties wijzigen via 
de tijdlijn kan nog steeds,
maar dit is een andere 
manier van werken.
Ik kan bijvoorbeeld nieuwe 
sleutelframes invoegen,
de locatie bewerken,
de eigenschappen bewerken
en deze wijzigingen direct
weerspiegeld zien in de tijdlijn.
Dat is handig als u een
set sleutelframes heeft
die zijn opgegeven als percentages.
Die waarden kunt u dan exact
invoeren in het css-deelvenster,
in plaats van ze uit de
tijdlijn te moeten halen.
Sleutelframes kunt u via het
css-deelvenster verwijderen
door het percentage te 
markeren en te verwijderen.
Ten slotte kunt u ook
nieuwe eigenschappen
toevoegen om te animeren.
Mijn eerste sleutelframe
geef ik de eigenschap
opacity, die zet ik op nul.
De eind-sleutelframe wordt
automatisch geüpdatet,
wat u kunt zien in de werkruimte.
In het voorbeeld bekijk 
ik de beoogde animatie.
Nu heeft u een andere manier om 
een sleutelframe-animatie te maken
via het css-deelvenster.

Spanish: 
Aquí están las mismas reglas.
Puedo seguir usando la línea de tiempo
para cambiar la animación
pero esta es otra forma de trabajar.
Por ejemplo,
puedo insertar fotogramas clave
editar la ubicación y las propiedades
y ver los cambios en la línea de tiempo.
Es útil si tengo varios fotogramas
especificados en porcentajes:
escribo los valores exactos en el panel
y no a ojo en la línea de tiempo.
Puedo quitar fotogramas en el panel
destacando el porcentaje y suprimiéndolo.
También puedo añadir
propiedades que animar.
En el primer fotograma clave
añado la opacidad y la ajusto en 0.
El fotograma final se actualiza
y se muestra en la escena.
En la vista previa
veo la animación que quería.
Es otra forma de crear

Thai: 
นี่คือกฎเดียวกันเหล่านั้น
คุณยังคงเปลี่ยนแปลงภาพเคลื่อนไหว
ในไทม์ไลน์ได้
แต่นี่ก็เป็นเพียงอีกวิธีในการทำงาน
ตัวอย่างเช่น ผมแทรกคีย์เฟรมใหม่ได้
แก้ไขตำแหน่งที่ตั้ง
แก้ไขคุณสมบัติ
และเห็นการเปลี่ยนแปลงเหล่านี้
อัปเดตในไทม์ไลน์
วิธีนี้จะมีประโยชน์หากคุณ
มีชุดคีย์เฟรม
ที่ระบุเป็นเปอร์เซ็นต์
โดยคุณจะป้อนค่าเหล่านั้นในแผง CSS
ได้อย่างถูกต้องแม่นยำ
แทนที่จะต้องเพ่งดูในไทม์ไลน์
นอกจากนี้คุณยังนำคีย์เฟรมใน
แผง CSS ออกได้
โดยการไฮไลต์ค่าเปอร์เซ็นต์และลบออก
และสิ่งสุดท้ายคือ
คุณยังเพิ่มคุณสมบัติใหม่ๆ
เพื่อทำภาพเคลื่อนไหวได้
ดังนั้นในคีย์เฟรมแรก ผมจะเพิ่ม
คุณสมบัติความทึบแสง
และตั้งค่าเป็น 0
คุณจะเห็นจุดสิ้นสุดของคีย์เฟรม
อัปเดตโดยอัตโนมัติ
และแสดงให้เห็นในพื้นที่งาน
ตอนนี้ผมจะดูตัวอย่างเพื่อยืนยัน
ว่าเห็นภาพเคลื่อนไหวตามที่ต้องการ
เท่านี้คุณก็มีอีกวิธี
ในการสร้างภาพเคลื่อนไหวจากคีย์เฟรม

German: 
Das hier sind die gleichen Regeln.
Sie können Änderungen
weiterhin in der Zeitachse vornehmen,
haben aber damit jetzt eine Alternative.
So kann ich beispielsweise
neue Keyframes einfügen
und die Position
oder die Eigenschaften ändern.
Die Änderungen sind in
Echtzeit in der Zeitachse zu sehen.
Dies ist nützlich, wenn Sie Keyframes
verwenden, die auf Prozentsätzen basieren.
Diese Werte können Sie
im Steuerfeld "CSS" genau eingeben,
statt nur ungefähre Werte
über die Zeitachse festzulegen.
Im Steuerfeld "CSS" können
auch Keyframes entfernt werden.
Dazu markieren und löschen Sie
einfach die entsprechende Angabe.
Außerdem können Sie Eigenschaften
hinzufügen, die Sie animieren möchten.
Beim ersten Keyframe füge ich
"opacity" (Deckkraft) mit dem Wert "0" hinzu.
Der End-Keyframe
wird automatisch aktualisiert
und die Änderung ist auch
im Arbeitsbereich zu sehen.
Jetzt rufe ich zur Überprüfung
eine Vorschau der Anzeige auf.
Die Animation wird dargestellt.
Das ist eine alternative Methode
zum Erstellen von Keyframe-Animationen

French: 
Voici ces mêmes règles.
Vous pouvez toujours
modifier l'animation dans la timeline.
C'est juste une autre façon de travailler.
Je peux insérer de nouvelles images clés,
changer l'emplacement,
modifier les propriétés
et voir ces mises à jour dans la timeline.
C'est utile si vous avez
un ensemble d'images clés
spécifiées en pourcentages.
Vous pouvez saisir précisément
ces valeurs dans le panneau "CSS"
au lieu de les évaluer
au juger dans la timeline.
Pour supprimer des images clés dans "CSS",
mettez le pourcentage
en surbrillance et supprimez-le.
Enfin,
vous pouvez ajouter des propriétés
pour animer l'image clé.
Sur ma première image clé,
j'ajoute la propriété "Opacité"
que je définis sur 0.
L'image clé de fin
est mise à jour automatiquement
et reflétée sur l'espace de création.
Je lance l'aperçu pour confirmer
et je vois l'animation prévue.
C'est donc une autre façon
de créer une animation d'image clé

Chinese: 
規則會顯示在這裡
您仍然可以在時間軸中修改動畫
不過現在又多了另一種做法
舉例來說
我可以加入新的主要畫面格
編輯位置
編輯屬性
這些變更就會即時反映在時間軸中
如果您有一整組主要畫面格
都是以百分比表示
這個功能就大有幫助
因為您可以在 CSS 面板中
精準地輸入這些值
再也不用目測調整時間軸
而且您只要在 CSS 面板中
選取顯示的百分比，然後將它刪除
就能移除主要畫面格
最後一項功能
您也可以加入新屬性來製作動畫
比方說，我要為第一個主要畫面格
加上透明度屬性
並將值設為零
此時，結束主要畫面格會自動更新
並即時反映在中心區域上
接著就可以進行預覽
確認動畫如預期地出現
以上就是
如何使用 CSS 面板
製作主要畫面格動畫

English: 
Here's those same rules
You can still make animation changes in the timeline
but this just provides another way of
working
For example I can insert new keyframes
edit the location
edit the properties
and see these changes updated in the timeline
This is useful if you
have a set of keyframes
specified in percentages
so you can enter those
values precisely in the CSS panel
rather than eyeballing them in the timeline
you can also remove keyframes in the CSS panel
by highlighting the percentage and
deleting it
And one last thing is
you can also add new properties to animate
So on my first keyframe I'll add the
property opacity and set it to zero
You'll see the end keyframe is updated automatically
and is reflected on the
stage
Now I'll preview to confirm
I see the intended animation
So there you have another way
of authoring keyframe animation

Polish: 
Reguły pozostały niezmienione.
Nadal możesz wprowadzać
zmiany w animacji na osi czasu,
ale możesz to zrobić w inny sposób.
Można na przykład
wstawiać nowe klatki kluczowe,
edytować ich położenie
i edytować właściwości.
Wprowadzone zmiany
są widoczne na osi czasu.
Jest to przydatne, gdy masz
zestaw klatek kluczowych
określonych w postaci procentów.
Możesz wpisać dokładnie
te wartości w panelu CSS
zamiast wyszukiwać je
wzrokiem na osi czasu.
Możesz też usunąć
klatki kluczowe w panelu CSS,
zaznaczając i usuwając wartości procentowe.
Możesz również
dodawać nowe właściwości
umożliwiające animację.
W mojej pierwszej klatce kluczowej
dodam właściwość Przezroczystość
i ustawię dla niej wartość zero.
Widzimy, że końcowa klatka kluczowa
została automatycznie zaktualizowana
i odzwierciedlona na scenie.
Wyświetlę teraz podgląd,
by sprawdzić utworzoną animację.
Możemy w ten sposób
tworzyć animacje klatek kluczowych

Portuguese: 
Aqui estão essas mesmas regras.
Ainda é possível alterar
a animação na timeline,
mas é só outra forma de trabalhar.
Por exemplo, posso inserir
novos frames-chave,
editar o local e as propriedades,
além de ver essas alterações
atualizadas na timeline.
Isso ajuda quando você tem
um conjunto de frames-chave
especificado em porcentagens,
já que pode inserir esses valores
precisos no painel CSS,
em vez de procurá-los na timeline.
Você também pode remover
esses frames-chave do painel
ao destacar e excluir a porcentagem.
Por fim, também é possível adicionar
novas propriedades à animação.
Para isso, no meu primeiro frame-chave,
adiciono a opacidade e defino como zero.
Vemos que o último frame-chave
é atualizado automaticamente
e aparece no cenário.
Agora, visualizo para confirmar
e vejo a animação que criei.
Assim, temos uma nova forma
de criar animações de frame-chave

Korean: 
여기에 키프레임 규칙이 있습니다
타임라인에서 애니메이션을
수정할 수 있지만
CSS 패널에서도
같은 작업이 가능합니다
예를 들어 새 키프레임을 삽입하고
위치를 변경하고
속성을 수정하면
타임라인에서 업데이트된 결과를
확인할 수 있습니다
이 기능은 키프레임을 백분율로
지정한 경우에 유용합니다
CSS 패널에 백분율을
정확하게 입력할 수 있으므로
타임라인에서
키프레임을 찾아 헤매지 않아도 됩니다
CSS 패널에서 키프레임을
삭제할 수도 있습니다
백분율을 강조표시하고
삭제하기만 하면 됩니다
마지막으로
애니메이션에 새 속성을
추가할 수도 있습니다
첫 번째 키프레임에
속성 불투명도를 추가하고
0으로 설정해 보겠습니다
이렇게 하면 마지막 키프레임이
자동으로 업데이트되어
스테이지에 반영됩니다
이제 미리보기를 통해
애니메이션이 원하는 대로
나타나는지 확인합니다
지금까지 CSS 패널을 사용하여
키프레임 애니메이션을 만드는

Turkish: 
Bu kurallar burada yer alır.
Zaman çizelgesinden de
animasyonda değişiklik yapabilirsiniz.
Artık birden fazla yolla çalışabilirsiniz.
Mesela yeni animasyon karesi ekleyebilir
konumu değiştirebilir
özellikleri düzenleyebilir
ve güncellenen değişiklikleri
gerçek zamanlı olarak görebilirim.
Yüzdeyle ifade edilen
keyframe grupları için
bu işlev özellikle yararlıdır.
Zaman çizelgesinde göz kararı yerine,
bu değerleri
CSS panelinde kesin bir şekilde
girmeniz mümkün olur.
CSS panelinde keyframe'leri kaldırılabilir
bunun için yüzdelik değeri
vurgulayıp silmek yeterlidir.
Son olarak,
animasyona yeni
özellikler ekleyebilirsiniz.
İlk keyframe'ime opacity özelliğini
ekleyip sıfır olarak ayarlayacağım.
Bitiş animasyonunun otomatik
güncellendiğini görürsünüz.
Aynı şekilde sahneye de yansır.
Şimdi önizleme yaparak
animasyonun istediğim
şekilde göründüğünden emin olacağım.
CSS panelinden
nasıl animasyon karesi

Turkish: 
oluşturacağınızı öğrendiniz.
İzlediğiniz için teşekkür ederiz.

Chinese: 
謝謝收看！

Korean: 
방법에 대해 알아보았습니다
감사합니다

Dutch: 
Bedankt voor het kijken.

Spanish: 
fotogramas de animaciones
con el panel CSS.
Gracias.

Russian: 
с помощью панели CSS.
Спасибо за внимание!

French: 
via le panneau "CSS".
Merci de votre attention.

English: 
using the CSS panel
Thanks for watching!
you

Portuguese: 
usando o painel CSS.
Obrigado por assistir!

Chinese: 
创作关键帧动画
感谢您观看本视频！

Polish: 
przy użyciu panelu CSS.
Dziękuję za uwagę.

Thai: 
โดยใช้แผง CSS
ขอบคุณที่รับชมครับ

Italian: 
le animazioni dei fotogrammi chiave
utilizzando il riquadro CSS.
Grazie per l'attenzione.

German: 
über das Steuerfeld "CSS".
Vielen Dank für Ihre Aufmerksamkeit!

Japanese: 
新しい方法をご紹介しました
ありがとうございました
