クリッピングマスクを使用する方法【Pixelmator Pro】

STUDIOでcssを使用して、時間経過とともに背景色を変化させる方法をご紹介します。
ボックスツールを使用して、背景を作成します。
・横幅:100% 縦幅:1flex
ボックスの項目から「Blank」を画面に配置します。
右側の設定画面を表示させ、埋め込みコードに以下のcssをコピー&ペーストします。
CSSでは、時間の設定と変化する色の設定を行えます。
設定後、ボックスは見える必要がないので最小限のサイズに変更し、色も透明にしておきましょう。
<style>
#background{
animation: bgchange 20s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
}
@keyframes bgchange{
0% {background:#1542EB;}/*変化させたい色*/
25% {background:#15EB35;}/*変化させたい色*/
50% {background:#EB1547;}/*変化させたい色*/
75% {background:#EBB315;}/*変化させたい色*/
90% {background:#963F53;}/*変化させたい色*/
100% {background:#3F486B;}/*変化させたい色*/
}
</style>
背景用のボックスを選択した状態で右側の設定画面からIDの欄に「background(任意)」と設定すれば完成です。